| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 5, 2021 3:45 PM |
12 |
11 |
1 |
💚Day 1️⃣9️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a button with hover effects.
❓What is the main logic behind it?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#CodeNewbie
#webdev
Let me explain👇🧵 pic.twitter.com/HKgoUzKcNV
👉 So, This is the main target to design this type of button.
✅ Let's start!!
👉 For creating this design we have to need a "before" pseudo-element.
👉 With a 50% top left and top right border-radius.
👉Initially, don't forget to set "0" as the value of height. pic.twitter.com/ygE7IgZKlk
✅ The main logic behind this design is to set "height" approx 200% when hovering over the button.
👉And finally, change the color of the button when hovering over it.
codepen link: