Question

我有一个按钮，按下该按钮会撤消用户的访问令牌。我想使它看起来像“使用Slack登录”按钮。我将在下面附加用于使用Slack按钮登录的html代码。

<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
  <img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
  />

我该怎么做才能使按钮外观相同？现在，我按钮的代码如下：

<input type="button" value="Unlink Slack" onclick="location.href='@Url.Action(" RevokeAuth ","Settings ")'"/>

Answer 1

这就是您要查找的内容吗？我将输入添加到具有松弛图像的div中，并将onclick添加到div和按钮中，以便指针看起来正确。

<style>
  .slk {
    border: 1px solid #C8C8C8;
    width: 170px;
    width: 170px;
    border-radius: 5px;
    display: flex;
    height: 35px;
    cursor: pointer;
  }
  
  .slkInp {
    color: #383838;
    background-color: white;
    border: none;
    padding: none;
    font-size: 15px;
    font-weight: bold;
  }
  
  .slkInp:hover {
    cursor: pointer;
  }
</style>

<div class="slk" onclick="location.href='@Url.Action(" RevokeAuth ","Settings ")'">
  <img alt="Unlink Slack" height="30" width="30" style="padding-left:10px;" src="https://pbs.twimg.com/profile_images/885554951857946624/sd7GRyjY_400x400.jpg" /><input class="slkInp" type="button" value="Unlink Slack" onclick="location.href='@Url.Action("
    RevokeAuth ","Settings ")'"/></div>
<a href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=373568302675.374024189699">
  <img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
  />

Answer 2

首先，由于要求达到50点信誉，我无法在评论中要求澄清。足够公平。

您要问的是如何将按钮样式设置为类似于Slack按钮，但只有HTML？他们在这里所做的只是使用<img>标签在屏幕上抛出一个按钮。如果要完全复制此行为，请抓住图像编辑器并绘制带有1px黑色边框的圆角矩形，将图标放在右侧，左侧放一些文本，然后采用松弛设计：

<a href="https://linkhere.link">
  <img alt="Sign in with X" height="40" width="172" src="image.png" />
</a>

如果您希望只用HTML和CSS设置类似样式的按钮，也可以使用input：

input {
  height: 40px;
  width: 172px;
  border: 1px solid gray;
  border-radius: 5px;
  background-color: white;
  content: url(image.png);
  ...
}

然后添加您自己的图像并将文本和图像移动到您喜欢的位置。

使常规按钮看起来像松弛

2 个答案: