Awesome CSS3 Hover Effects Social Media Icons
Our new awesome CSS3 hover effects social media icons. Which is made by using custom HTML, CSS, and font-awesome icons. I hope you know that we had pu
CSS:
<style>
/* foulscode.com*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
padding: 0;
margin: 0;
}
.social-links {
text-align: center;
margin: 100px 0px;
}
.social-btn {
display: inline-block;
width: 80px;
height: 80px;
background: #9C27B0;
margin: 10px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: 0px 5px 10px 0px #909090;
color: #ffffff;
overflow: hidden;
position: relative;
border: 1px dotted #fff;
}
.social-btn i {
line-height: 80px;
font-size: 26px;
transition: 0.2s linear;
}
.social-btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.social-btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.social-btn:hover::before{
animation: effect 0.6s 1;
top: -10%;
left: -10%;
}
/*-- Hover Animation Effect --*/
@keyframes effect {
0% {
left: -120%;
top: 100%;
} 50%{
left: 10%;
top: -30%;
} 100%{
top: -10%;
left: -10%;
}
}
/* foulscode.com*/
</style>
HTML:
</head>
<body>
<div class="social-links">
<a class="social-btn" href="URL">
<i class="fab fa-facebook-f"></i>
</a>
<a class="social-btn" href="URL">
<i class="fab fa-instagram"></i>
</a>
<a class="social-btn" href="URL">
<i class="fab fa-youtube"></i>
</a>
<a class="social-btn" href="URL">
<i class="fab fa-google"></i>
</a>
<a class="social-btn" href="URL">
<i class="fab fa-twitter"></i>
</a>
</div>
</body>
</html>
Σχόλια