Кнопка-какашка
Как сделать кнопку, которая при наведении становится визуально похожей на эмодзи какашки. Без использования 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>
Вот что получилось:
Как вам?
Стоит ли сделать более полноценный UI-kit в такой стилистике? Хотели бы вы, например, тогглы в виде туалетной бумаги или инпуты в виде лужи?
Пишите идеи мне на почту или в социальных сетях — может, это действительно обретёт форму...
Читать далее
- 25 мая 2025 г.
SolidJS — великий обзор
Что такое Solid.js: революция в мире фронтенда, альтернатива React или очередной клон? Разбираем плюсы, минусы и реальные кейсы использования.
- 13 мая 2025 г.
Клонирование моего голоса с помощью ИИ – что случилось с Тео Воном?
Я потерял доступ к голосу Тео Вона на Play.ht. Это история о том, как я пытался клонировать свой голос с помощью OpenVoice — и что пошло не так