Кнопка-какашка

Как сделать кнопку, которая при наведении становится визуально похожей на эмодзи какашки. Без использования SVG и изображений — только с помощью чистого CSS.

Многим фронтенд-разработчикам хотя бы раз в жизни хотелось сделать свой UI-kit и выложить его в open source. Недолго думая, я решил создать bullshit UI-kit. Но, как это часто бывает, моего энтузиазма хватило... только на одну кнопку.

В итоге получилась обычная кнопка с hover-эффектом. При наведении она визуально превращается в какашку.

Весь "рисунок" создаётся благодаря CSS-свойству clip-path у псевдоэлемента ::after. Мы просто вырезаем фигуру по заданным процентам — и никакого 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>