Hiya guys, Right now on this submit, we’ll study How one can Create social media icons with Hover Effect utilizing HTML and CSS. To create it we’re going to use easy CSS & Font Superior. Hope you get pleasure from our weblog.
Social media icons are an important a part of our web site. They permit customers to rapidly share our content material throughout social media websites, increasing customers in seconds with only a click on. Even it’s a small characteristic to be carried out; you might be artistic with it and make the social icons interactive in a approach that provides a singular expertise to your customers.
That is the place this tutorial will come in useful for you. On this tutorial, I’ll present you a straightforward approach so as to add a hover impact on our social icons with CSS!
Demo
Click to look at demo!
To create Social Media Icons Hover Impact now we have used Font Superior to make icons. Therefore, you’ll need a Font Superior hyperlink in your <head> tag. It’s quite simple, all that you must do is to log into Font Superior web site and they’re going to give you the Package’s Code.
Social Media icons Hover Impact HTML CSS (supply code)
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Making Animations</title>
<hyperlink rel="stylesheet" href="https://style-tricks.com/codewithayan10/Animations.css">
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- superior/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="nameless"/>
</head>
<physique>
<div class="wrapper">
<div class="button">
<div class="icon">
<a category="fab fa-facebook-f"></a>
</div>
<span>Fb</span>
</div>
<div class="button">
<div class="icon">
<a category="fab fa-instagram"></a>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="icon">
<a category="fab fa-twitter"></a>
</div>
<span>Twitter</span>
</div>
<div class="button">
<div class="icon">
<a category="fab fa-youtube"></a>
</div>
<span>Youtube</span>
</div>
</div>
</physique>
</html>
CSS Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,physique{
show: flex;
justify-content: heart;
align-items: heart;
peak: 100%;
width: 100%;
background: linear-gradient(315deg, #fff 0%, rgb(245, 245, 245) 74%);
}
.button{
peak: 60px;
width: 60px;
background-color: #fff;
border-radius: 60px;
cursor: pointer;
box-shadow: 0 10px 10px rgb(94, 91, 91);
float: left;
overflow: hidden;
transition: all 1s ease-in-out;
}
.button:hover{
width: 220px;
}
.button:nth-child(1):hover .icon { background: #4267B2;}
.button:nth-child(2):hover .icon { background: #E1306C;}
.button:nth-child(3):hover .icon { background: #1DA1F2;}
.button:nth-child(4):hover .icon { background: #FF0000;}
.button:nth-child(1) span { coloration: #4267B2;}
.button:nth-child(2) span { coloration: #E1306C;}
.button:nth-child(3) span { coloration: #1DA1F2;}
.button:nth-child(4) span { coloration: #FF0000;}
.button span{
font-size: 20px;
font-weight: 500;
line-height: 60px;
margin-left: 10px;
}
.button, .icon{
show: inline-block;
peak: 60px;
width: 60px;
text-align: heart;
border-radius: 50px;
}
.button, .icon a{
font-size: 25px;
line-height: 60px;
}
.icon{
float: left;
}
Congratulations! We’ve got now efficiently created our Social Media icons with Hover Impact utilizing CSS.
My Web site: codewithayan, see this to take a look at all of my superb Tutorials.