使常规按钮看起来像松弛的

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);
  ...
}

然后添加您自己的图片，并根据您的喜好移动文字和图片。

使常规按钮看起来像松弛的

Make a regular button look like slack

html

razor

slack