Good afternoon guys, today I will share to you on how to code cool social media buttons that would catch the user’s attention. I’ve also added some CSS animation effects to the social media buttons to make it stand out. To follow this cool tutorial, you must have at least basic understanding about HTML & CSS coding. If you do not have knowledge of these technologies mentioned earlier, I highly recommend you to visit W3schools website to learn the basics.
Let’s start coding please!
First step is to set up the HTML structure that will contain social media buttons.
The social media icons that I will use are not .gif or .png images. Instead, I will get this from Font Awesome package that can be downloaded on that website.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cool Social Media Buttons Tutorial</title>
</head>
<body>
<p class="follow-txt">Follow us on:</p>
<ul class="social-media">
<li class="facebook">
<a href="#" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="google-plus">
<a href="#" title="Google Plus">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li class="twitter">
<a href="#" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="youtube">
<a href="#" title="YouTube">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="instagram">
<a href="#" title="Instagram">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</body>
</html>
After setting up the HTML structure, I will insert the Font Awesome CSS file from the Font Awesome package that I’ve downloaded.
<link rel="stylesheet" type="text/css" href="fontawesome-free-5.9.0-web/css/all.css">
Next step, create the CSS file to add styling on the social media buttons.
I’ve created the CSS file called style.css and placed this inside the css folder.
<link rel="stylesheet" type="text/css" href="css/style.css">
Here’s the main source code of the CSS file.
p.follow-txt {
width: 150px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 0;
margin: 50px auto 30px;
border: 2px dashed #ccc;
animation: follow-txt-animation 0.8s linear 0s both;
}
ul.social-media {
margin: 0;
padding: 0;
text-align: center;
}
ul.social-media li {
font-size: 20px;
text-align: center;
list-style-type: none;
display: inline-block;
margin: 0 20px 0 0;
}
ul.social-media li:last-child {
margin-right: 0;
}
ul.social-media li a {
background-color: transparent;
width: 50px;
height: 50px;
text-decoration: none;
display: block;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul.social-media li a:hover {
color: #fff !important;
text-decoration: none;
-moz-transform: scale(1.3) rotate(360deg);
-webkit-transform: scale(1.3) rotate(360deg);
-o-transform: scale(1.3) rotate(360deg);
-ms-transform: scale(1.3) rotate(360deg);
transform: scale(1.3) rotate(360deg);
}
ul.social-media li a i {
padding: 14px 0 0 0;
}
ul.social-media li.facebook {
animation: facebook-animation 0.5s linear 0.3s both;
}
ul.social-media li.facebook a {
color: #4285F4;
border: 1px solid #4285F4;
}
ul.social-media li.facebook a:hover {
background-color: #4285F4;
}
ul.social-media li.google-plus {
animation: google-plus-animation 0.5s linear 0.6s both;
}
ul.social-media li.google-plus a {
color: #DB4437;
border: 1px solid #DB4437;
}
ul.social-media li.google-plus a:hover {
background-color: #DB4437;
}
ul.social-media li.twitter {
animation: twitter-animation 0.5s linear 0.9s both;
}
ul.social-media li.twitter a {
color: #F4B400;
border: 1px solid #F4B400;
}
ul.social-media li.twitter a:hover {
background-color: #F4B400;
}
ul.social-media li.youtube {
animation: youtube-animation 0.5s linear 1.2s both;
}
ul.social-media li.youtube a {
color: #0F9D58;
border: 1px solid #0F9D58;
}
ul.social-media li.youtube a:hover {
background-color: #0F9D58;
}
ul.social-media li.instagram {
animation: instagram-animation 0.5s linear 1.5s both;
}
ul.social-media li.instagram a {
color: #4285F4;
border: 1px solid #4285F4;
}
ul.social-media li.instagram a:hover {
background-color: #4285F4;
}
@keyframes follow-txt-animation {
0% {
opacity: 0;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
50% {
opacity: 0.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
@keyframes facebook-animation {
0% {
opacity: 0;
-moz-transform: scale(2) rotate(0deg);
-webkit-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-o-transform: scale(1) rotate(360deg);
-ms-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes google-plus-animation {
0% {
opacity: 0;
-moz-transform: scale(2) rotate(0deg);
-webkit-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-o-transform: scale(1) rotate(360deg);
-ms-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes twitter-animation {
0% {
opacity: 0;
-moz-transform: scale(2) rotate(0deg);
-webkit-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-o-transform: scale(1) rotate(360deg);
-ms-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes youtube-animation {
0% {
opacity: 0;
-moz-transform: scale(2) rotate(0deg);
-webkit-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-o-transform: scale(1) rotate(360deg);
-ms-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
@keyframes instagram-animation {
0% {
opacity: 0;
-moz-transform: scale(2) rotate(0deg);
-webkit-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
-o-transform: scale(1) rotate(360deg);
-ms-transform: scale(1) rotate(360deg);
transform: scale(1) rotate(360deg);
}
}
/*# sourceMappingURL=css/style.css.map */
Here’s the complete HTML structure with the Font Awesome + the custom CSS files.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cool Social Media Buttons Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="fontawesome-free-5.9.0-web/css/all.css">
</head>
<body>
<p class="follow-txt">Follow us on:</p>
<ul class="social-media">
<li class="facebook">
<a href="#" title="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="google-plus">
<a href="#" title="Google Plus">
<i class="fab fa-google-plus-g"></i>
</a>
</li>
<li class="twitter">
<a href="#" title="Twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="youtube">
<a href="#" title="YouTube">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="instagram">
<a href="#" title="Instagram">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</body>
</html>
We’re done!
Check Out The Preview
If you find it difficult to follow this tutorial, feel free to contact me and I will be happy to assist you. I hope you find this tutorial informative, interesting and useful to your website projects. Thank you.