| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
January 6, 2022 3:33 PM |
23 |
19 |
4 |
💚 Day 5️⃣1️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥 Today we going to design a button using the clip-path property.
❓What's the main logic behind it with the codepen link?
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#webdev
Let me explain!👇🧵 pic.twitter.com/KfH2i6wuQ1
📌 First, you have to know, what is clip-path and how to use it!
📌 The best thread on clip-path.
👇
Ajay Yadav 🎯 (@ATechAjay) - November 14, 2021 8:41 AM
🔥 One of the best threads on 𝐂𝐒𝐒 𝐂𝐋𝐈𝐏 - 𝐏𝐀𝐓𝐇.
✅You can create all these shapes with a clip-path.
👋It took me 3 days to make this thread so plz take benefit of it.❤
#100DaysOfCode
[#webdev elopment](https://twitter.com/hashtag/webdevelopment)
#webdev #webdeveloperAn Awesome 🧵👇 pic.twitter.com/Hzr5ulDz66
1️⃣ Here is the HTML code, there are two-span tags are used for the set the orange and white background. pic.twitter.com/bJfxHmh7y2
2️⃣ Then we have to design our button.
→ Here you have to define the height and width of the button. pic.twitter.com/arDsqN9CCT
3️⃣ Now, here I am writing the common code for both span elements. pic.twitter.com/Q6NnE8QrMD
4️⃣ I hope you already know clip-path from my thread.
→ Here I am going to clip the element, which has a white background.
- top left = x:50%, y:0
- top right= x:100%, y:0
- bottom right = x:100%, y:100%
- bottom left = x:50%, y:100% pic.twitter.com/pXqekveGQf
5️⃣ When we hover over the white background the then values are
- top left will be = x:0, y:0
- top right= x:100%, y:0
- bottom right = x:100%, y:100%
- bottom left = x:0, y:100% pic.twitter.com/D9AYArZerH
6️⃣ Then we have to set the orange background color of the other span element. pic.twitter.com/5v9A4n6j7e
7️⃣ And finally, when we hover over the "orange" background, then the values of the clip-path of the "white" background will be changed.
- top left will be = x:100%, y:0
- top right= x:100%, y:0
- bottom right = x:100%, y:100%
- bottom left = x:100%, y:100% pic.twitter.com/FRBD5e0twv
→ codepen link: