I want the website to open the link after pressing the button, and not like it is now that I have to press the icon to open the link. I have to click on the small icon for the link to open and I want to make this link open as if you press the button
and if someone would like it, here are nice transitions, maybe someone will be useful
li {
display: block;
float: left;
}
nav ul {
list-style-type: none;
}
nav li {
width: 30px;
height: 30px;
text-align: center;
position: relative;
transition: 0.3s;
margin: 3rem;
}
nav li::before,
nav li::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transition: 0.3s;
}
nav li::before {
background-color: white;
z-index: -1;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
background-color: #66CCFF;
transform: translate(1.5rem, 1.5rem);
z-index: -2;
}
nav li:hover {
transform: translate(1.5rem, 1.5rem);
color: white;
}
nav li:hover::before {
background-color: #66CCFF;
}
nav li:hover::after {
background-color: white;
transform: translate(-1.5rem, -1.5rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="social">
<ul>
<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
</nav>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
