| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
November 27, 2021 7:03 AM |
11 |
7 |
3 |
💚Day 1️⃣1️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a button with this awesome hover effect with gradient.
❓What is the main logic behind it?
#100DaysOfCode
#webdevelopment
#CodeNewbie
Let me explain🧵👇 pic.twitter.com/q7BfXisKD7
✅ First of all, I'm going to design our anchor tag like this then we add a hover effect in it.
1️⃣ So, we have to add a span tag inside the anchor tag like this.
Here, tag is used to draw the left and right borders.
2️⃣ Then we have to design our anchor tag as required.
⛔ And don't forget to add overflow and position in the anchor tag element.
3️⃣ Now, we have to use two pseudo-element for top and bottom borders.
And set the value of left and right.
4️⃣ And now when we hover on it then it comes to the initial position.
5️⃣ Finally we have to set the values of left and right borders.
6️⃣ Now when hover on it then it comes to it at the initial position.
✅That's all🥰
