Animated Share Button Using only HTML & CSS

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create Animated share Button using HTML & CSS Only in this blog post.

The social icons or share button represented the graphics linked to your social media accounts. After creating social media icons  linked with your social media accounts , share buttons are automatically represented you all social media account that linked with the social icons on your website or other platform.  And giving your visitors and follower connect with you.

In this program(Animated Share Button) first, on the webpage there is single share button when you hover on the share button the share button divided into small round social media icons button with amazing sliding animation that's look amazing and beautiful o webpage.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Animated Share Button).

Video Tutorial of Animated Share Button

I hope you like this program and video tutorial😊

If you like this program(Animated Share Button) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Animated Share Button[source code]

Before the sharing the codes of this program(Animated Share Button).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file.

In HTML File i created <ul> tag and inside the <ul> tag i created five <li> tags for social media icons for social media icons  i used fontawesome with the class name in <li> (fa fa-)

In CSS file first (if you not using boostrap) reset the all default padding and margin to 0. And then i give 100% hight of body and fix the position by using flexbox. Then design the following social icons by thier colors. And simply add hover effect on share button. you can adjust your style by your own interest.

HTML FILE:

<ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> 

CSS FILE:

body{ height: 100vh; display: flex; margin: 0; padding: 0; justify-content: center; align-items: center; font-family: sans-serif; } ul{ position: relative; margin: 0;padding: 0;display: flex; list-style: none; width: 404px; height: 60px; } ul:before{ content: "\f1e0"; font-family: fontAwesome; position: absolute; width: 100%; height: 100%; background:linear-gradient(45deg,#ff00ff,#8a2be2); border-radius: 30px; text-align: center; line-height: 60px; color: white; font-size: 30px; padding-left: 2px; transition: .5s; z-index: 1; } ul:hover:before{width: 60px;} ul li{position: absolute;transition: 1s;} ul li a{ display: block; width: 60px; height: 60px; text-align: center; background-color: #262626; color: white; border-radius: 50%; font-size: 30px; transition: 0.5s; line-height: 60px; } ul li:nth-child(1) a{ background-color: #3b5999; } ul li:nth-child(2) a{ background-color: #55acee; } ul li:nth-child(3) a{ background-color: #dd4b39; } ul li:nth-child(4) a{ background-color: #0077B5; } ul li:nth-child(5) a{ background-color: #e4405f; } ul:hover li:nth-child(1) a{ transform: translateX(68px) rotate(360deg); transition-delay: .8s; } ul:hover li:nth-child(2) a{ transform: translateX(136px) rotate(360deg); transition-delay: .6s; } ul:hover li:nth-child(3) a{ transform: translateX(204px) rotate(360deg); transition-delay: .4s; } ul:hover li:nth-child(4) a{ transform: translateX(272px) rotate(360deg); transition-delay: .2s; } ul:hover li:nth-child(5) a{ transform: translateX(340px) rotate(360deg); transition-delay: 0s; }