When we need to make our website more beautiful, we can use the CSS code for different elements of the website. In this code, we also have a number of social buttons together using CSS. These buttons have a slide effect in hover mode. The name of each button is written next to it in hover mode. The color of the button icon turns white in hover mode and the background of each button becomes colored.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
<section>
<div class="wrapper">
<div class="button">
<div class="icon">
<i class="fab fa-instagram"></i>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-facebook-f"></i>
</div>
<span>Facebook</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-twitter"></i>
</div>
<span>Twitter</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<span>LinkedIn</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<span>YouTube</span>
</div>
<div class="button">
<div class="icon">
<i class="fab fa-github"></i>
</div>
<span>Github</span>
</div>
</div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.button {
float: left;
width: 60px;
height: 60px;
cursor: pointer;
background: #fff;
overflow: hidden;
border-radius: 50px;
transition: all 0.3s ease-in-out;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}
.button span {
font-size: 20px;
font-weight: 500;
line-height: 60px;
margin-left: 10px;
}
.button:hover {
width: 200px;
}
.button:nth-child(1):hover .icon {
background: #e1306c;
}
.button:nth-child(2):hover .icon {
background: #4267b2;
}
.button:nth-child(3):hover .icon {
background: #1da1f2;
}
.button:nth-child(4):hover .icon {
background: #0e76a8;
}
.button:nth-child(5):hover .icon {
background: #ff0000;
}
.button:nth-child(6):hover .icon {
background: #333;
}
.button:nth-child(1) span {
color: #e1306c;
}
.button:nth-child(2) span {
color: #4267b2;
}
.button:nth-child(3) span {
color: #1da1f2;
}
.button:nth-child(4) span {
color: #0e76a8;
}
.button:nth-child(5) span {
color: #ff0000;
}
.button:nth-child(6) span {
color: #333;
}
.button .icon {
width: 60px;
height: 60px;
text-align: center;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease-in-out;
}
.button .icon i {
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-in-out;
}
.button:hover i {
color: #fff;
}
