Social Media Button Hover Effect Using HTML & CSS

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

The social icons represented the graphics linked to your social media accounts. After creating social media icons  linked with your social media accounts , icons 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(Social Media Button Hover Effect ) first, on the webpage there are some social media icon or button when you hover on the particular icons or button the color of icons change to beautiful color with shadow effect. The hover animation is fully created with only HTML & CSS without using javascript.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Social media icon hover effect).

Video Tutorial of Social Media Button Hover Effect 

I hope you like this program and video tutorial😊

If you like this program(Social Media Button Hover Effect) 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)

Social Media Button Hover Effect[source Code]

Before sharing the codes of this program(Social Media Button Hover Effect). 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 the HTML File first i created a  <ul> tag with the class name social and in in the <ul> tag i created four <li> tags with the class name 'social itmes' for social media icons with their respective class name (like facebook, instagram etc.) and in each of <li> tags i created <i> tag with class name fa fa-(with social media icons name) with fontawesom icons.

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 container div and fix the position by using flexbox. Then design the following social icons by thier colors. And simply add hover effect on icons with box shadow and border color for  effect. you can adjust your style by your own interest.

HTML FILE:

<ul class="social"> <li class="social-items"><i class="fa fa-facebook"></i></li> <li class="social-items"><i class="fa fa-twitter"></i></li> <li class="social-items"><i class="fa fa-instagram"></i></li> <li class="social-items"><i class="fa fa-linkedin"></i></li> </ul> 

CSS FILE:

body{ background-color: #ccc; height: 100vh; display: flex; align-items: center; justify-content: center; } .social{ list-style: none; margin: 0;padding: 0;display: flex;justify-content: space-between; } .social-items{ text-align: center; cursor: pointer; width: 100px; height: 100px; background-color: white; margin: 10px; font-size: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; overflow: hidden; color: #262626; z-index: 1; transition: .5s ease-out; } .social-items:before{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: -100%; z-index: -1; border-radius: 50%; transform: scale(0); transition: .3s ease-in-out; } .social-items:after{ content: ''; width: 50%; height: 100%; position: absolute; top: 0; right: -100%; background-color: rgba(255,255,255,.3); transition: .3s ease-in-out; } .social-items:hover{color: white;} .social-items:hover:before{transform: scale(0.9);left: 0;} .social-items:hover:after{right: 0;} .social-items:nth-child(1):before{ background-color: #3b5999; } .social-items:nth-child(2):before{ background-color: #55acee; } .social-items:nth-child(3):before{ background-color:#e4405f; } .social-items:nth-child(4):before{ background-color: #0077b5; }