How to put link in css? - css

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>
How to put link in button?
i tried everything codes available in google but still error in my website
i dont know whats the best code for this
thanks for someone who wants to teach me.

Answer 1

No. Its not possible to add link through css. But you can use jquery
$('.case').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});

Answer 2

I'll suggest to add anchor tag if you want to add link.
Home
Add link in "#". It'll work.

Answer 3

Four different possibilities to a button become a link (CSS isn't an option):
.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;
}
Javascript:<br>
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br>
Inner link:<br>
<button class="button">click</button><br><br>
Wrapper link:<br>
<button class="button">click</button><br><br>
Fake button:<br>
<a href="http://example.com" class=button>click</a>

Answer 4

Please try this:
<button class="button">Home</button>

Answer 5

I think its the easy way to do it.
.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;
}
<button class="button">Home</button>

Answer 6

You can have the link as a button this way
home
Or if you using a css library like bootstrap
home