Question

<style>
.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
</style>
<button class="button">Home</button>

如何将链接放入按钮？我尝试了谷歌提供的所有代码，但我的网站仍然出错我不知道最好的代码是什么感谢有人想教我。

Answer 1

没有。它不可能通过CSS添加链接。但是你可以使用jquery

$('.case').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="example.com/script.php?id="></a>');
});

Answer 2

按钮的四种不同可能性成为链接（CSS不是一个选项）：

＆＃13;

.button {
  position: relative;
  background-color: #41A0BF;
  border: none;
  font-size: 20px;
  color: #FFFFFF;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 120px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

a, a:active, a:visited, a:focus {
  text-decoration: none;
  color: white;
  font-family: arial, sans-serif;
}

＆＃13;

Javascript:<br>
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br>

Inner link:<br>
<button class="button"><a href="http://example.com" style="text-decoration: none">click</a></button><br><br>

Wrapper link:<br>
<a href="http://example.com"><button class="button">click</button></a><br><br>

Fake button:<br>
<a href="http://example.com" class=button>click</a>

＆＃13;

Answer 3

如果您想添加链接，我建议添加锚标记。

<a href="#">Home</a>

在＆＃34;＃＆＃34;中添加链接。它会起作用。

Answer 4

请试试这个：

<a href="https://www.google.co.in/"><button class="button">Home</button></a>

Answer 5

我认为这是一种简单的方法。

＆＃13;

.button {
position: relative;
background-color: #41A0BF;
border: none;
font-size: 20px;
color: #FFFFFF;
padding: 15px;
width: 120px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #69D2F5;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
a{
  text-decoration:none;
}

＆＃13;

<a href="https://www.google.co.in"><button class="button">Home</button></a>

＆＃13;

Answer 6

您可以通过这种方式将链接作为按钮

<a href="#" class="button">home</a>

或者如果您使用像bootstrap这样的CSS库

<a href="#" class="btn btn-default">home</a>

如何在css中放置链接？

6 个答案: