| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
December 20, 2021 8:25 AM |
10 |
9 |
1 |
💚Day 3️⃣4️⃣ / 1️⃣ 0️⃣0️⃣ days of Master in CSS Design series!
💥Today we going to design a hoverable button using a clip-path.
❓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/NA9TSEpzPh
📌 So for this design, first you have to complete this topic from this thread.
↓↓ twitter.com/ATechAjay/stat…
Ajay Yadav 🎯 (@ATechAjay) - December 19, 2021 3:21 PM
💥 Circle function in clip-path!
→ This is one of the most important functions in a clip-path like a "polygon" function.
→ If you know this function, then you will be able to design some great components of the websites.
#100DaysOfCode
#CodeNewbie #webdevA Thread 🧵↓ pic.twitter.com/RXu3BTI6qQ
1️⃣ Now you have to add your HTML code like this!
2️⃣ After that you have to design your span tag inside the button tag.
→ key points(Don't forget)
- z-index
- clip-path
- transition ↓↓ pic.twitter.com/N7KLK8QS9o
3️⃣ Finally, when we hover over the button, then(in span tag) the value of the circle function is set to 100%.
→ codepen link: