Animated Social Media Button using HTML & CSS

Irfan Hussain
May 14, 2020
Animated Social Media Button using HTML & CSS | Legenddocx Creation |


Animated Social Media Button using HTML & CSS
Source Code Download Here :--

Download Now


Create a Beautiful Social Media Buttons Hover Effect Only HTML and CSS. #html #css #socialmediabutton #hovereffecthmtlcss #latesthtmlcss Like on Facebook:--- https://www.facebook.com/legenddocx-105920114420383/ Subscribe to our Channel:---- https://www.youtube.com/channel/UCh0NCrnU5PUYF04qs21Un8A







Code;--


<html>

<head>
<title>Follow Me</title>

<!-- Latest compiled and minified CSS -->

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<style>
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

 .social-btns .btn:before {
top: 90%;
left: -110%;
}

 .social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

 .social-btns .btn.facebook:before {
background-color: #3b5998;
}

 .social-btns .btn.facebook .fa {
color: #3b5998;
}

 .social-btns .btn.twitter:before {
background-color: #3cf;
}

 .social-btns .btn.twitter .fa {
color: #3cf;
}

 .social-btns .btn.google:before {
background-color: #dc4a38;
}

 .social-btns .btn.google .fa {
color: #dc4a38;
}

 .social-btns .btn.youtube:before {
background-color: #f26798;
}

 .social-btns .btn.youtube .fa {
color: #f26798;
}

 .social-btns .btn.instagram:before {
background-color: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

 }
}

 .social-btns .btn.instagram .fa {
color: #d6249f;
}

 .social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}

 .social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}

 .social-btns {
height: 90px;
margin: auto;
font-size: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

 .social-btns .btn {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
opacity: 0.99;
}

 .social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

 .social-btns .btn .fa {
font-size: 38px;
margin-top: 25px;
vertical-align: middle;
}
</style>

</head>


<body>

 <div class="back">
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn google" href="#"><i class="fa fa-google"></i></a>
<a class="btn youtube" href="#"><i class="fa fa-youtube"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
</div>

 </div>

 </body>

</html>