Social Media Icons With Hover Animation Using HTML and CSS
Welcome to the Codewithrandom website. In this article, we learn how to create Social Media Icons With Hover Animation Using HTML and CSS. In this Project, we’ll use HTML and CSS to create some of the most well-known Social Media Icons.
.png "Social Media Icons HTML and CSS | Hover Icons Animation - Codewithrandom")
Different apps can have a distinct personalities thanks to social media icons. Icons are typically used to designate a specific website or app. This is why these icons should always point to your company’s account on a particular site rather than the home page itself.
50+ HTML, CSS & JavaScript Projects With Source Code
We Hope you enjoy our blog so let’s start with a basic Html Structure for Social Media Icons Hover Animation.
HTML Code For Social Media Icons Hover Animation
HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let’s look at our HTML code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Socail Media Icon</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="social-menu"> <ul> <li><a href="#" target="blank"><i class="fab fa-github"></i></i></a></li> <li><a href="#" target="blank"><i class="fab fa-instagram"></i></a></li> <li><a href="#" target="blank"><i class="fab fa-linkedin-in"></i></a></li> <li><a href="#"><i class="fab fa-codepen" target="blank"></i></a></li> </ul> </div> <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script> </body> </html>
In order to add styling to our social media symbol webpage, we must first add the font-awesome import link and external stylesheet link inside our html file. These links must be present before we can add the icon to the page.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
<script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css">
Now we will be adding the icons using the font awesome classes .First of all using the <div> tag we will create the container for our social media icons and using the <i> tag with with specific class names we will create the social media icons.
<div class="social-menu">
<ul>
<li><a href="https://github.com/sanketbodke" target="blank"><i class="fab fa-github"></i></i></a></li>
<li><a href="https://www.instagram.com/imsanketbodke/" target="blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.linkedin.com/in/sanket-bodake-995b5b205/" target="blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="https://codepen.io/sanketbodke"><i class="fab fa-codepen" target="blank"></i></a></li>
</ul>
</div>There is all the Html Code for the Social Media Icons Hover Animation. Now, you can see output without Css. then we write CSS Code For Social Media Icons Hover Animation.
Restaurant Website Using HTML and CSS
HTML Output
CSS Code For Social Media Icons Hover Animation
body{
background: #d8d8d8;
}
.social-menu ul{
position: absolute;
top: 50%;
left: 50%;
padding: 0;
margin: 0;
transform: translate(-50%, -50%);
display: flex;
}
.social-menu ul li{
list-style: none;
margin: 0 15px;
}
.social-menu ul li .fab{
font-size: 30px;
line-height: 60px;
transition: .3s;
color: #000;
}
.social-menu ul li .fab:hover{
color: #fff;
}
.social-menu ul li a{
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
text-align: center;
transition: .6s;
box-shadow: 0 5px 4px rgba(0,0,0,.5);
}
.social-menu ul li a:hover{
transform: translate(0, -10%);
}
.social-menu ul li:nth-child(1) a:hover{
background-color: rgba(0, 0, 0, 0.829);
}
.social-menu ul li:nth-child(2) a:hover{
background-color: #E4405F;
}
.social-menu ul li:nth-child(3) a:hover{
background-color: #0077b5;
}
.social-menu ul li:nth-child(4) a:hover{
background-color: #000;
}Step1:We will style the body of the website using the body tag selector. We’ll apply a background colour of “grey” using the background property.
The location will now be set to “absolute” using the class selector (.social-menu ul). The top and left properties will be used to add 50% top and left spaces, and the padding and margin properties will be used to set the margin and padding to zero. Flex is selected for the show.
Infinite Autoplay Carousel using HTML,CSS and JavaScript
Step2:Now that we have chosen the child object using the parent-child class selector, we will style our icons. We’ll use the font-size property to change the font size to “30px,” and the line-height property to add a line height of 60px.
Using the hover property, we will also add the hover colour property to our social media icons, causing the icon’s colour to shift as the user hovers over it.
.social-menu ul li .fab:hover {
color: #fff;
}
.social-menu ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
text-align: center;
transition: .6s;
box-shadow: 0 5px 4px rgba(0, 0, 0, .5);
}
.social-menu ul li a:hover {
transform: translate(0, -10%);
}
.social-menu ul li:nth-child(1) a:hover {
background-color: rgba(0, 0, 0, 0.829);
}
.social-menu ul li:nth-child(2) a:hover {
background-color: #E4405F;
}
.social-menu ul li:nth-child(3) a:hover {
background-color: #0077b5;
}
.social-menu ul li:nth-child(4) a:hover {
background-color: #000;
}CSS Output:
We have completed our Social Media Icons Hover Animation Project. Here is our final updated output HTML + CSS.
Video Output:
Final Output Of Social Media Icons Hover Animation
Weather App Using Html,Css And JavaScript
We have completed our Social Media Icons Hover Animation. Here is our updated output with Html and Css. Hope you like the Social Media Icons Hover Animation Project. you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Thank you!
ADVERTISEMENT
This post teaches us to create Social Media Icons and Hover Animation Using Html and Css. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
ADVERTISEMENT
Written by – Code With Random/Anki
code by – Sanket Bodake
ADVERTISEMENT
What is the purpose of social media icons?
Different apps can have a distinct personalities thanks to social media icons. Icons are typically used to designate a specific website or app. This is why these icons should always point to your company’s account on a particular site rather than the home page itself.
ADVERTISEMENT
Where we can use these social media icons?
Modern websites can use social media icons to save room and give the page a more contemporary appearance. These icons also work as hyperlinks, allowing users to connect with other users by clicking on a social media icon.
Invece di:
.social-menu ul li .fab:hover{
color: #fff;
}
andrebbe messo:
.social-menu ul li:hover .fab{
color: #fff;
}