Learn with us how to create simple social media button in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Fine the full code in bio 🤩🤓 #webdevelopment #socialmedia #programmingexercises #csscoding ♬ original sound - Creative Tim
1. HTML Code
<div class="container">
<a href="#"><i class="fa fa-facebook fa-3x"></i></a>
<a href="#"><i class="fa fa-twitter fa-3x"></i></a>
<a href="#"><i class="fa fa-instagram fa-3x"></i></a>
<a href="#"><i class="fa fa-linkedin fa-3x"></i></a>
<a href="#"><i class="fa fa-youtube fa-3x"></i></a>
</div>
2. CSS Code
.container {
position: absolute;
text-align: center;
width: 100%;
top: 40%;
background: -webkit-linear-gradient(left, #9d4edd, #90caf9);
background: -moz-linear-gradient(left, #90caf9, #24c8e5);
background: linear-gradient(left, #90caf9, #30e8de);
}
a {
display: inline-block;
color: black;
text-decoration: none;
margin: 15px 4px;
position: relative;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}
a:hover {
color: #fff;
opacity: 0.9;
text-shadow: 2px 3px 5px #ffb700;
top: -3px;
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
