logo DevAnswer - Developers Answer

HTML Dynamic Social Buttons with Hover Effect

4th November

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.social{
	width: 100%;
	height: auto;
	text-align: center;
}
.social a{
	display: inline-block;
	padding: 5px;

}
.social a i{
	color: #3b1e59;
    width: 55px;
    height: 55px;
    font-size: 25px;
    line-height: 50px!important;
    border: 3px solid #fff;
    opacity: .8;
    transition-property: transform;
    -moz-transition-property: -moz-transform;
    -webkit-transition-property: -webkit-transform;
    transition: all 0.6s cubic-bezier(0.88, -0.48, 0.38, 1.85);
    border-radius: 50%;	
}
.social a i:hover{
	opacity: 1;
	border-radius: 20%;
	
}
.social a:hover i.fa-linkedin-in,.social a:hover i.fa-telegram-plane{
	transition:  .6s ease-in;
	background: #0088cc; 
	color: white;
	border: 3px solid #00aaff; 
}	
transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.social a:hover i.fa-at{
	transition:  .6s ease-in;
	background: #D44638; 
	color:white;
	border: 3px solid #fd8e8e;
	transform: rotate(360deg);
    -webkit-transform: rotate(360deg); 
}
.social a:hover i.fa-instagram{
	transition:  .6s ease-in;
	background: linear-gradient(#F58529 20%, #FEDA77 50%, #DD2A7B 75%, #8134AF 90%, #515BD4); 
	transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
	border: 3px solid #fd8e8e; 
	color:white;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<section class="social">
			<a href="">
				<i class="fas fa-at"></i>
			</a>
			<a href="">
				<i class="fab fa-linkedin-in"></i>
			</a>
			<a href="">
				<i class="fab fa-instagram"></i>
			</a>
			<a href="">
				<i class="fab fa-telegram-plane"></i>
			</a>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>                        



Other Codes