Hello developers, today in this blog, you'll learn to create Social Media Icons with Hover Effect using HTML & CSS.
The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks. The social media icons can be used on your website, to share your content with others.
In this blog (Social Media Icons with Hover Effect), on the webpage, there are four social media icons that were inside a circle. The hover effect has been used in every icon. While hovering the icon in the animation, the circle will zoom out a circle and show the social media icons alone. The CSS hover effect and transition property have been used over the social media icons.
The source code of this Social Media Icon with Hover Effect is given below if you want the source code of this program, you can copy it. You can use these Social Media Icons with Hover Effect on your creativity and, can take this project to the next level.
Social Media Icons with Hover Effect [Source Code]
To make this website (Social Media Icons with Hover Effect), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");
body{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
}
.social-icons {
padding: 0;
list-style: none;
margin: 5em;
}
.social-icons li {
display: inline-block;
margin: 1rem;
position: relative;
font-size: 2em;
}
.social-icons i {
color: #21D4FD;
background: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
top: 0.7em;
left: 0.7em;
transition: all 265ms ease-out;
}
.social-icons a {
display: inline-block;
}
.social-icons a:before {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
content: " ";
width: 70px;
height: 70px;
border-radius: 100%;
display: block;
background: #000;
transition: all 265ms ease-out;
}
.social-icons a:hover:before {
transform: scale(0);
transition: all 265ms ease-in;
}
.social-icons a:hover i {
transform: scale(2.2);
-ms-transform: scale(2.2);
-webkit-transform: scale(2.2);
color: #000;
background: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 265ms ease-in;
}
.credit{
text-align: center;
color: #000;
margin-top: 30px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating these Social Media Icons with Hover Effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team