Social Media buttons with Cool Animation
At the end you will see something like this ⏬:
Before going into code, I would like to share the resource from where I learn some amazing stuff like the above.
Please check out the above channel, if you love building websites or portfolios using HTML, CSS, JS. 🤝🙌
Now, I am assuming that you already have some or little idea about HTML and CSS and if not, then this is not for you. I recommend visiting w3schools. ✌
And here we go:
If you have VSCode or Sublime, then with the help of boilerplate, just make a new HTML file and go for it:
Then make 5 social media links by using <a>
<body> <div class="media-btn">
<a href="#" class="button">1</a>
<a href="#" class="button">2</a>
<a href="#" class="button">3</a>
<a href="#" class="button">4</a>
<a href="#" class="button">5</a>
</div></body>
[Note: Don’t forget to give the class to the links and make it under a <div>]
You will see something like this:
Now copy the below URL in the <link>:
“https://use.fontawesome.com/releases/v5.4.1/css/all.css”
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
/>And then click here and copy the HTML code mentioned below and put it under the button area:
Then your code will look like this:
<head>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
/>
<title>Media Button</title>
</head><body> <div class="media-btn"> <a href="#" class="button"><i class="fab fa-facebook"></i></a>
<a href="#" class="button"><i class="fab fa-facebook"></i></a>
<a href="#" class="button"><i class="fab fa-facebook"></i></a>
<a href="#" class="button"><i class="fab fa-facebook"></i></a>
<a href="#" class="button"><i class="fab fa-facebook"></i></a> </div>
</body>
And the output:
Go on and change the rest four classes inside <a> by twitter, instagram, google and youtube respectively. Then you will see something like this:
And the modified code:
<body><div class="media-btn"><a href="#" class="button"><i class="fab fa-facebook"></i></a>
<a href="#" class="button"><i class="fab fa-twitter"></i></a>
<a href="#" class="button"><i class="fab fa-instagram"></i></a>
<a href="#" class="button"><i class="fab fa-google"></i></a>
<a href="#" class="button"><i class="fab fa-youtube"></i></a
</div>
</body>
And we are done with the HTML part, now we will do the styling using CSS. Make a separate file and name it with the extension “.css”
And don’t forget to link that CSS file inside the HTML <head>:
<link rel=”stylesheet” href=”style.css” />
Let’s start with the basics first. Shift the position of the buttons to the center of the page by aligning it to the center.
Since the class name is “media-btn”:
body {
margin: 0;
padding: 0;
}.media-btn {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
Now, we have to set the height and width of the buttons(element) and for that, we will use the “display:inline-block” property of the CSS:
.button {
background: grey;
display: inline-block;
width: 90px;
height: 90px;
margin: 10px;
border-radius: 30%;
overflow: hidden;
position: relative;
}Again, it’s your choice to choose whatever suits you the best.
We don’t want to display the content flowing out of the box or its container, therefore we have used the “overflow” property, along with the “position” property used here in case we want to manipulate the location of the elements.
Yes, it’s not looking that great. And we will make it better. 🤝🤝
First, with the use of line-height property, we will place the icons in the center.
.button i {
line-height: 90px;
font-size: 30px;
transition: 0.2s linear;
}[Note: - Transition property used here to add the animating effects on the button]
Better. ✌✌
Let’s add some basic hover effect to the above buttons:
.button:hover i {
transform: scale(1.3);
color: #f1f1f1;
}
Perfect.✔✔
Now, it’s time for the final effect.
.button::before {
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #c24e0a;
transform: rotate(45deg);
left: -110%;
top: 90%;
}Just like we added “::before” effect on buttons, we will be adding the “::before” effect on button-hover too.
.button:hover::before {
animation: xyz 0.7s 1;
top: -10%;
left: -10%;
}[Note: this 'xyz' is a variable which will be used for further animation effect]
That “0.7s” is the time that will reflect the animation. We will understand its use in the below code:
@keyframes xyz {
0% {
left: -110%;
top: 90%;
}
50% {
left: 10%;
top: -30%;
}
100% {
top: -10%;
left: -10%;
}
}We are applying the animation effect on ‘xyz’ and it will take 0.7s to reflect which we have used in the 2nd last section.
All these 0%, 50%, 100% are the partitioning. In simple words, the effect will reflect in 0% as mentioned, then in 50%, something different, and then in 100%, something different. Please see the above code again, to understand it better.
And by saving all this, we will see something like this:
I know, the color was black in the very first picture and one more effect is missing here. We can add that. Let’s finalize it, as I said in the beginning.
.button {
background: grey;
display: inline-block;
width: 90px;
height: 90px;
margin: 10px;
border-radius: 30%;
overflow: hidden;
position: relative;
#the next two line should be added only
box-shadow: 0 5px 15px -5px #000000;
color: #020e16;
}And there you go:
Great. I hope you learn something cool.
Thank you for your time and please feel free to correct me, if somewhere I have made it wrong or incomplete.
Do encourage me to write more by clapping. Comment down your thoughts, your disagreement, your appreciation, anything.
Keep up the great work and more power and love to you.
Thank you! 🙌🤝
— GareebCODER 👩💻
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
