पूप बटन

कैसे एक ऐसा बटन बनाएं, जो होवर करने पर पूप इमोजी जैसा दिखे। न 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>