Introduction of Social Media Icons CSS
Here we are going to make a Social Media Icons CSS with a hovering effect with the use of HTML and CSS. In this project, there will be a social icon page on which the logos of social media apps like YouTube, WhatsApp, Facebook, and Twitter will be displayed, and when the user hovers over one particular logo, the name of that logo will appear with a transition effect.
Now let’s start making this Social Media Icons Html Css by doing the simple code of HTML and CSS. That will be easy to understand even for both a fresher and an experienced person. This is very useful as you can use it in your website or you can practice making such types of projects by taking ideas from here.
HTML
First, we will create the structure of a Social Media Icons Html Css with the help of HTML. In which we will use the font Awesome to implement icons of social media by attaching them through a link in the HTML code. In this, we will make a parent div in which all the icons will be coded. Then we will make four child divs for social media. In these child divs, there will be three tags: one for icons, a second tag(a span tag) for the name of the icon. The last one for the background color of the icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socail media Icons</title>
<!-- font awesome cdn -->
<script src="https://kit.fontawesome.com/46b7ceee20.js" crossorigin="anonymous"></script>
<!-- custome css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-icon-list">
<div class="icon-group">
<i class="fab fa-facebook"></i>
<span class="icon-text">
Facebook
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-twitter"></i>
<span class="icon-text">
Twitter
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-whatsapp"></i>
<span class="icon-text">
whatsapp
</span>
<span class="icon-bg"></span>
</div>
<div class="icon-group">
<i class="fab fa-youtube"></i>
<span class="icon-text">
Youtube
</span>
<span class="icon-bg"></span>
</div>
</div>
</body>
</html>CSS
After making the structure of the Social Icons Hover Effect Css. We will apply design and also make it responsive for other screens with the help of CSS (an external stylesheet is used to give styling to the html elements and to make the website responsive for another device). In this, we will first make the background black and take the icons’ parent div to the center of the screen.
Now we will move toward the main styling, which means the design of icons. In which we will adjust the size and positions of child divs, like background color, border, etc. Then we will hide the names of logos in default case and only show the icons of logos. When the user hovers over that particular icon. The width of the logo’s div will increase. The name of that logo will be shown with some transition effects in Social Icons Hover Effect Css.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap');
:root{
--bg-color: rgb(0, 0, 0);
--container-bg-color: #fff;
--facebook-color:#1778F2;
--twitter-color:#1Da1f2;
--whatsapp-color:#25D366;
--youtube-color:#f00;
--container-shadow:2.3px 2.3px 1.9px rgba(0, 0, 0, 0.035),5.4px 5.4px 4.3px rgba(0, 0, 0, 0.048),9.7px 9.7px 7.7px rgba(0, 0, 0, 0.054),16.1px 16.1px 12.8px rgba(0, 0, 0, 0.057),26.5px 26.5px 21.2px rgba(0, 0, 0, 0.062),46.2px 46.2px 37px rgba(0, 0, 0, 0.073),100px 100px 80px rgba(0, 0, 0, 0.12);
}
*,
::before,
::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Poppins";
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-color);
}
.social-icon-list{
height: 100px;
width: 500px;
/* border: 1px solid #000; */
border-radius: 20px;
display: grid;
grid-template-columns: repeat(4,1fr);
justify-items: center;
align-items: center;
column-gap: 20px;
padding: 0 20px;
/* box-shadow: var(--container-shadow); */
background-color: var(--container-bg-color);
}
.icon-group{
height: 50px;
width: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
position: relative;
transition: all 1s ease;
}
.icon-group:hover{
width: 175px;
justify-content: space-around;
}
.icon-group:nth-child(1) {
border: 2px solid var(--facebook-color);
}
.icon-group:nth-child(2) {
border: 2px solid var(--twitter-color);
}
.icon-group:nth-child(3) {
border: 2px solid var(--whatsapp-color);
}
.icon-group:nth-child(4) {
border: 2px solid var(--youtube-color);
}
.icon-group:hover i,
.icon-group:hover .icon-text{
color: #fff;
}
.icon-group .icon-text{
width: 0;
overflow: hidden;
}
.icon-group:hover .icon-text{
width: fit-content;
transition: width 1s ease;
}
.icon-group i,
.icon-group .icon-text{
z-index: 2;
}
.icon-group .icon-bg{
position: absolute;
height: 110%;
width: 110%;
border-radius: 10px;
clip-path: circle(50% at -100% 50%);
z-index: 1;
}
.icon-group:hover .icon-bg{
clip-path: circle(160% at 10% 60%);
transition: all 1s ease;
}
.icon-group:nth-child(1) .icon-bg{
background-color: var(--facebook-color);
}
.icon-group:nth-child(2) .icon-bg{
background-color: var(--twitter-color);
}
.icon-group:nth-child(3) .icon-bg{
background-color: var(--whatsapp-color);
}
.icon-group:nth-child(4) .icon-bg{
background-color: var(--youtube-color);
}
@media (max-width:768px) {
.social-icon-list{
height: 250px;
width: 350px;
grid-template-columns: repeat(2,1fr);
}
.icon-group:hover{
width: 150px;
}
}
Output of Social Media Icons CSS
Finally, we made the Social Media Icons CSS with a hovering effect by following the simple code of CSS and HTML step by step carefully. You can make your own project by following our ideas for code. If you want the source code, then click on the button given below to download Social Media Icons Html Css.
For more explanation, click on the link to watch the video.
You can also check:
