28 मई 2025

पूप बटन

कैसे एक ऐसा बटन बनाएं, जो होवर करने पर पूप इमोजी जैसा दिखे। न 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-किट बनाऊँ? क्या आप टॉयलेट पेपर जैसे टॉगल या पानी के छींटे जैसे इनपुट देखना चाहेंगे?

अपने आइडिया मुझे ईमेल या सोशल नेटवर्क्स पर भेजें — क्या पता ये सच में बन जाए...

अगला पढ़ें

हमारे समुदाय से जुड़ें