| author | handle | source | date |
|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 14, 2021 1:00 PM |
💚Day 2️⃣8️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design buttons or nav links with these awesome animation effects.
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#CodeNewbie
#webdev
Let me explain👇🧵 pic.twitter.com/KkO2dWKpSk
→ To create this border, we have to use 4 span tags.
→ This border has been made by combining all these elements.
1st span tag = top boder 2nd span tag = right boder 3rd span tag = bottom boder 4th span tag = left boder
→ After that, we have to design the button according to our needs.
it's my requirement.
→ After that, all these span tags have to do positions like this.
→ For the "top" border:
- set width = 100%
- set height = 5px(for border width)
- position = absolute (relative in the button tag)
→ keyframes:
- set left (0-50%) = -100%
- now left (50-100%) = 100%
📌 The animation will start from the left and end on the right. pic.twitter.com/RYhdkSLXaj
→ For the "right" border:
- set width = 5px (for border width)
- set height = 100%
→ keyframes:
- set top (0-50%) = -100%
- now top (50-100%) = 100%
📌 The animation will start from the top and end on the bottom.
⛔Don't forget to set animation delay in each border. pic.twitter.com/pcNBGzqrXd
→ For the "bottom" border:
- set width = 100%
- set height = 5px (for border width)
→ keyframes:
- set right (0-50%) = -100%
- now right (50-100%) = 100%
📌 The animation will start from the right and end on the left. pic.twitter.com/jkHdZYGXkL
→ For the "left" border:
- set width = 5px (for border width)
- set height = 100%
→ keyframes:
- set bottom (0-50%) = -100%
- now bottom (50-100%) = 100%
📌 The animation will start from the bottom and end on the top. pic.twitter.com/VKaxhiA1pD
→ codepen link: