如何使带有链接的 HTML 按钮看起来带有白色文本的蓝色？答案

【问题标题】：How do I make a HTML button with a link look Blue with white text?如何使带有链接的 HTML 按钮看起来带有白色文本的蓝色？
【发布时间】：2018-04-17 21:55:25
【问题描述】：

这是我添加链接之前的代码：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      border-radius: 12px;
      background-color: #33ccff;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 22px;
      padding: 20px;
      width: 195px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 3px;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .button:hover span {
      padding-right: 25px;
    }
    
    .button:hover span:after {
      opacity: 1;
      right: 0;
    
    
    }
    </style>
    </head>
    <body>
    
    <button class="button" ><span>DOWNLOAD </span></button>
    
    </body>
    </html>

看起来像这样：

我想为代码添加一个链接，这样当我按下按钮时，它会将我重定向到另一个网站。我尝试向我的按钮添加链接，但按钮较小，背景为灰色，文本为黑色。此外，当我点击它时，它并没有将我带到我希望它带我去的网站。

我在这里找到了这个帖子：Add URL link in CSS & Html to button, 但我真的不知道 .ui-state-highlight 类是什么意思或者我应该把它放在哪里。

您能否告诉我如何在上面的按钮代码中添加一个链接，这样当我按下按钮时，它会将我重定向到另一个网站。谢谢！

【问题讨论】：

标签： html css button

【解决方案1】：

通常，链接标签会更好。按钮用于诸如提交表单之类的事情。

你可以保留你的 CSS。只需将按钮更改为：

<a class="button" href="yourwebsitehere.com">DOWNLOAD</a>

【讨论】：

【解决方案2】：

这里是一个笨蛋：

.button {
  display: inline-block;
  border-radius: 12px;
  background-color: #33ccff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  padding: 20px;
  width: 195px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 3px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;


}

<!DOCTYPE html>
<html>
<body>

<a href="https://stackoverflow.com" class="button" ><span>DOWNLOAD </span></a>

</body>
</html>

如您所见，我将button 元素更改为a 元素并添加了href 属性。

【讨论】：

【解决方案3】：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      border-radius: 12px;
      background-color: #33ccff;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 22px;
      padding: 20px;
      width: 195px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 3px;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .button:hover span {
      padding-right: 25px;
    }
    
    .button:hover span:after {
      opacity: 1;
      right: 0;
    
    
    }
    </style>
    </head>
    <body>
    
    <button class="button" onclick="changeSite()"><span>DOWNLOAD </span></button>
    <script>
    function changeSite()
    {
      var siteName;
      siteName="https://www.google.com/";
      window.location.href=siteName;
    }
    </script>
    
    </body>
    </html>

【讨论】：