Social Media Icons Hover Effects

Hello friends, you will learn to create 3D Social Media icons Button Hover Effects in this blog. This icons button is designed by coding html or CSS only which when moving the mouse up the button rises up which is designed with CSS hover which looks beautiful and attractive.

We had previously shared a button designed by CSS animation, which you can see by clicking on the css animation button.

Social media button is a collective term for a website that focuses on communication, community-based input, interaction. You have different types of social media on the website like Facebook, Twitter, Instagram etc ... The content is taken to share and follow, which is very beneficial for the website.

You can see in this image it is a social media button designed with an html or CSS. This image has four buttons which are designed in a Neumorphism. These four buttons are designed by CSS hover which you can easily Will learn to create When you move the mouse over the button, it rises with the shadow which is designed from CSS. If you are aware of html and CSS or you are in the beginning then you will learn to design it easily.

If you are having trouble understanding the design of this button, then you can understand by watching the video of this social media icons button and how the code has been written which I hope to understand after seeing it.

Video Tutorial of 3D Social Media Icons Button Hover Effects

By watching this video tutorial, you must have understood that the design of this social media button has been done by writing which code, this button has been written inside the <ul> list of html, which has <li> written in it inside cs. It has been designed in coding, which looks beautiful in view, you can also use this social media button in your website, which makes it look good.

Social Media Icons Hover Effects Source Codes

Know about html code of Social Media Icons Hover Effects First we took ul tag inside the body ul is called unordered list list, within this ul four li list is taken li is called list style. Inside tag this tag is called anchor tag. It is used as a link. It is taken i tag and span tag inside the anchor tag. Here i tag is written as a social media icon, inside which the class of icon The name can be printed by typing and span is used for the name of the icon inside which the text is written, first the Facebook icon is added inside the li tag and its name is written in the text inside the span

The second li has an anchor and span tag inside it. The class name of the social media icon is written inside the anchor tag. A Twitter icon has been added inside this tag, whose class name is fa fa-twitter and below this tag has taken the span tag which is written inside the text named twitter icon

Similarly, a and span tag is taken inside the third li and inside this a tag the class name of the social media icon of Google plus is written with the class name fa fa-google-plus given in the span tag below this tag. The text of the name of this icon is written

A similar tag has been taken inside the fourth number tag of li. It has taken the class name of Instagram's social icon inside a tag, whose class name is fa fa-instagram and the text of this icon by taking the span tag under this name. It has been written that you have written the name of every icon on top of every button. This name has been written inside the tag.

Now we know about the css of this social media button. First we zeroed the margin and padding to the body tag and gave the background color font-family property the position of the lower tag below this body, absolute the position and from the top and left. Size and flexed the display. The li tag inside it has been given a list-style none and margin in css and the class name of social media has been given font-size color and line height in the same way and all tags have been styled And all this tag is designed as a social media button which you are seeing in the image above.

You like this social media button, you can get the code of this button for free, which we have given in two file, one is html code file and the other is given CSS code file, both these files are given below by scrolling these files. Copy it and paste it in your file after copying it. Which will make you easier to understand.

HTML CODE FILE :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="3dhover.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <ul> <li> <a href="#"> <i class="fa fa-facebook"></i> <span> - Facebook</span> </a> </li> <li> <a href="#"> <i class="fa fa-twitter"></i> <span> - Twitter</span> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus"></i> <span> - Google</span> </a> </li> <li> <a href="#"> <i class="fa fa-instagram"></i> <span> - Instagram</span> </a> </li> </ul> </body> </html>

CSS CODE FILE :

body{ margin: 0; padding: 0; background-color: #ccc; font-family: Arial, Helvetica, sans-serif; } ul{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; margin: 0; padding: 0; } ul li{ list-style: none; margin: 0 5px; } ul li a .fa{ font-size: 40px; color: #262626; line-height: 80px; transition: .5s; padding-right: 14px; } ul li a span{ padding: 0; margin: 0; position: absolute; top: 30px; color: #262626; letter-spacing: 4px; transition: .5s; } ul li a{ text-decoration: none; display: absolute; display: block; width: 210px; height: 80px; background-color: #fff; text-align: left; padding-left: 20px; transform: rotate(-30deg) skew(25deg) translate(0,0); transition: .5s; box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5); } ul li a::before{ content: ""; position: absolute; top: 10px; left: -20px; height: 100%; width: 20px; background: #b1b1b1; transform: 0.5s; transform: rotate(0deg) skewY(-45deg); } ul li a::after{ content: ""; position: absolute; bottom: -20px; left: -10px; height: 20px; width: 100%; background-color: #b1b1b1; transform: .5s; transform: rotate(0deg) skewX(-45deg); } ul li a:hover{ transform: rotate(-30deg) skew(25deg) translate(20px, -15px); box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5); } ul li:hover .fa{color: #fff;} ul li:hover span{color: #fff;} ul li:hover:nth-child(1) a{ background: #3b5998; } ul li:hover:nth-child(1) a::before{ background: #3b5998; } ul li:hover:nth-child(1) a::after{background: #4a69ad;} ul li:hover:nth-child(2) a{background: #00aced;} ul li:hover:nth-child(2) a::before{background-color: #097aa5;} ul li:hover:nth-child(2) a::after{background: #53b9e0;} ul li:hover:nth-child(3) a{background: #dd4b39;} ul li:hover:nth-child(3) a::before{background-color: #b33a2b;} ul li:hover:nth-child(3) a::after{background: #e66a5a;} ul li:hover:nth-child(4) a{background: #e4405f;} ul li:hover:nth-child(4) a::before{background-color: #d81c3f;} ul li:hover:nth-child(4) a::after{background: #e46880;}