पूप बटन
कैसे एक ऐसा बटन बनाएं, जो होवर करने पर पूप इमोजी जैसा दिखे। न SVG, न इमेज — सिर्फ़ शुद्ध CSS।
कई फ्रंटएंड डेवलपर्स ने कभी न कभी अपना UI-किट बनाने और उसे ओपन सोर्स करने का सोचा होगा। मैंने भी बिना ज़्यादा सोचे, एक बकवास UI-किट बनाने का फैसला किया। लेकिन, जैसा अक्सर होता है, मेरा जोश... बस एक बटन तक ही सीमित रहा।
आख़िरकार, ये एक सिंपल बटन निकला जिसमें होवर इफेक्ट है। जब आप होवर करते हैं, तो ये दिखने में पूप जैसा बन जाता है।
पूरा "डिज़ाइन" ::after स्यूडो-एलिमेंट पर CSS प्रॉपर्टी clip-path की वजह से बनता है। हम बस प्रतिशतों के हिसाब से शेप काटते हैं — न SVG, न img।
कोड का उदाहरण नीचे है। आप यह उदाहरण GitHub Gist पर भी देख सकते हैं।
<style>
.button {
width: fit-content;
display: block;
border: 1px solid black;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
position: relative;
z-index: 1;
transition: all 0.8s;
}
.poop {
width: 100%;
padding-top: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.poop::after {
content: "";
display: block;
position: absolute;
inset: 0;
transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: translateY(-30%);
clip-path: polygon(
39% 7%,
40% 12%,
39% 16%,
37% 21%,
36% 26%,
38% 29%,
33% 31%,
29% 34%,
25% 39%,
25% 45%,
26% 50%,
21% 53%,
15% 57%,
14% 63%,
15% 69%,
12% 72%,
8% 75%,
4% 80%,
4% 85%,
5% 91%,
9% 95%,
14% 97%,
22% 97%,
30% 96%,
38% 95%,
41% 94%,
48% 97%,
60% 97%,
77% 97%,
85% 96%,
95% 92%,
98% 86%,
96% 79%,
92% 73%,
86% 71%,
83% 72%,
86% 67%,
86% 60%,
84% 55%,
79% 51%,
75% 51%,
76% 44%,
75% 40%,
71% 35%,
66% 34%,
64% 35%,
65% 31%,
64% 26%,
61% 20%,
56% 15%,
50% 12%
);
}
.button:hover {
text-shadow: 1px 0 1px white, -1px 0 1px white, 0px 1px 1px white, 0px -1px
1px white, 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px
1px 2px white;
border-color: transparent;
}
.button:hover .poop::after {
background-color: brown;
transform: translateY(0%);
}
</style>
<div class="button" role="button" tabindex="0">
<div role="img" class="poop"></div>
Button
</div>
देखिए कैसा दिखता है:
कैसा लगा?
क्या इस स्टाइल में एक पूरा UI-किट बनाऊँ? क्या आप टॉयलेट पेपर जैसे टॉगल या पानी के छींटे जैसे इनपुट देखना चाहेंगे?
अपने आइडिया मुझे ईमेल या सोशल नेटवर्क्स पर भेजें — क्या पता ये सच में बन जाए...
अगला पढ़ें
- 25 मई 2025
SolidJS — अंतिम समीक्षा
Solid.js क्या है: फ्रंटएंड में क्रांति, React का विकल्प या एक और क्लोन? हम फायदे, नुकसान और वास्तविक उपयोग के मामले समझते हैं।
- 13 मई 2025
AI से अपनी आवाज़ क्लोन करना – Theo Von के साथ क्या हुआ?
मैंने Play.ht पर Theo Von AI वॉयस का एक्सेस खो दिया। यह कहानी है कि मैंने OpenVoice से अपनी आवाज़ क्लोन करने की कोशिश की — और क्या गलत हुआ