Question

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

<!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>

看起来像这样：

DOWNLOAD Button

我想添加一个代码链接，所以当我按下按钮时，它会将我重定向到另一个网站。我试图添加一个链接到我的按钮，但按钮较小，它有一个灰色的背景，文字是黑色的。此外，当我点击它时，它没有带我到我希望它带我的网站。

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

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

Answer 1

这是一个吸虫：

.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属性。

Answer 2

通常，链接标记可以更好地工作。按钮用于提交表单等内容。

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

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

Answer 3

＆＃13;

<!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>

＆＃13;

如何制作带有链接的HTML按钮看起来是蓝色的白色文本？

3 个答案: