How to make Social Media Button With Best Animation Using HTML & CSS ,Without JAVASCRIPT.


Why Javascript use to Animate button, you can use CSS,
you have no Idea HOW CSS is Powerful, you have no idea. 

HTML CODE:


<!DOCTYPE html>
<html>
<head>

<script src="https://kit.fontawesome.com/e25b852c87.js" crossorigin="anonymous"></script>
<title>Animated Social Media Button</title>

<link rel="stylesheet"  href="Buttonstyle.css">
</head>
<body>

<div style="margin-left:600px;" class="container" >
	<input type="checkbox" id="share-toggle">
	<label for="share-toggle">
		<span><i class="fas fa-share-alt"></i></span>
	</label>
	<div class="social-media-list">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-whatsapp"></i></a>
	<a href="#"><i class="fab fa-snapchat-ghost"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	<a href="#"><i class="fab fa-reddit-alien"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-dribbble"></i></a>
	<a href="#"><i class="fab fa-linkedin-in"></i></a>

	</div>
</div>

</body>
</html>






We are making social media button in ring shape using HTML & CSS.
  • First you can use HTML and make a body of button using label tag.
  • After use of label tag use anchor tag , using of anchor tag we can connect various button with proper link.
  • Also import of button library we are fetching label or symbol of different button .
  • In this button project we are using CSS , So we can make button very attractive and also get animation without JAVASCRIPT.


CSS CODE:

*{margin: 0; padding: 0; box-sizing: border-box;}

body{
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #333;  
}

.container{
	width: 70px; height: 70px;
	position: relative;
}

#share-toggle{ display: none; }

span, a{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: 50%;
}

span{
	width: 70px; height: 70px;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	background-color: #eee;
	color: #333;
	font-size: 30px;
	z-index: 1;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

.social-media-list{
	width: 60px; height: 60px;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}

.social-media-list a{
	width: 60px; height: 60px;
	border-radius: 50%;
	text-decoration: none;
	color: #fff;
	transition: all 0.3s;
	font-size: 25px;
}

#share-toggle:checked ~ .social-media-list a:nth-child(1){
	background-color: #3B5998;
	transition-delay: 0s;
	transform: translateY(-100px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(2){
	background-color: #25D366;
	transition-delay: 0.1s;
	transform: translate(70px,-70px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(3){
	background-color: #FFFC00;
	transition-delay: 0.2s;
	transform: translateX(100px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(4){
	background-color: #FF0000;
	transition-delay: 0.3s;
	transform: translate(70px,70px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(5){
	background-color: #FF4500;
	transition-delay: 0.4s;
	transform: translateY(100px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(6){
	background-color: #00ACEE;
	transition-delay: 0.5s;
	transform: translate(-70px,70px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(7){
	background-color: #EA4C89;
	transition-delay: 0.6s;
	transform: translateX(-100px);
}

#share-toggle:checked ~ .social-media-list a:nth-child(8){
	background-color: #0E76A8;
	transition-delay: 0.7s;
	transform: translate(-70px,-70px);
}




USING OF CSS WE CAN MAKE BUTTON ANIMATED :-
  • In this CSS code we are using different tags or library of CSS.
  • You can copy code that shown above editor.

Output:-




 
We Are sharing our best experience of HTML & CSS. If you want to make this types of button you can follow Learning Aspect on instagram .

Click Below Link:-