| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 21, 2021 10:48 AM |
25 |
16 |
1 |
💚Day 3️⃣5️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a hoverable button with animation.
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
[#web development](https://twitter.com/hashtag/webdevelopment)
#web
Let me explain!🧵👇 pic.twitter.com/FIV6VWqu9R
📌 This design is made using the "background-position" property.
→ So, first of all, we have to learn what is and how to use the "background-position" property.
↓↓
→ It is used to set the initial position of a background image.
→ If you want to position your background image on the "top" and "left" corner then, you should use these values.
→ background-position: top left;
→ There are many values like
- background-position: top;
- background-position: top left;
- background-position: 100% 50%;
- background-position: top 50%;
→ These values are in percentage.
→ Now, how to design a border around the button(using before pseudo-element).
→ This is designed using width and height properties.
→ width of the before pseudo-element = 100% width + 10px extra.
→ height of the before pseudo-element = 100% height + 10px extra.
→ The result, after using height and width property.
📌Now we have to center it.
🤔Do you know how to center this before pseudo-element?
→ Answer: left and top property
→ For centering it, we have to set half of the extra(10px) values that we defined.
- but Negative values.
like this!
→ The result, after using top and left property.
→ Then, we have to set the background size of the pseudo-element with some high values.
→ For animating the background position.
→ Finally, we have to add keyframes.
0 to 50% = bg position (0 0)
50% = bg position (500% 0) at 100% = bg position (0 0)
→ codepen link: