author | handle | source | date | likes | retweets | replies |
---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
November 25, 2021 9:58 AM |
8 |
6 |
2 |
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
💚Day 9️⃣ / 1️⃣0️⃣0️⃣ days of Master in CSS Design series!
💥 Today we going to design a button with a move up and down as well as a hover effect.
❓What is the main logic behind it?
#100DaysOfCode
#CodeNewbie #webdev
And one more thing plz follow @ATechAjay for motivation! 🧵👇 pic.twitter.com/DTyoe4R17P
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
1️⃣ When we hover on the link it moves up 3px or moves -3px in vertically.
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
2️⃣ When we click on the link then the link will be moving up 1px from the initial position.
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
3️⃣ We have to add pseudo-elements for the hoverable effect absolute to the anchor element.
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
4️⃣ Now when hover on it then the after pseudo-element will be scale with opacity is set to 0.
That's all✅
Ajay Yadav 🎯 (@ATechAjay) - November 25, 2021 9:58 AM
codepen: