Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing YouTube music or a rotary telephone dial for number inputs.
For buttons, skeuomorphic design usually takes form of a physical switch or push button. But what about one that takes the form, and even the behavior, of that other button — the sartorial kind?
Enter Buttonhole, the UI button you can unbutton.
Demo
Drag the button below and observe the change in value:
Details
Buttonhole is implemented as a custom element. Include buttonhole.js on your page and start using the HTML element <button-hole>:
<button-hole buttoned="false"></button-hole>
Besides dragging the button, you can set the buttoned attribute to true to button the button, and false to unbutton it and return to its initial position.
The element can be customized by setting the following CSS variables:
--buttonhole-bg-color-left: rgba(0, 0, 0, 1);
--buttonhole-bg-color-right: rgba(0, 0, 0, 0.7);
--buttonhole-button-color: yellow;
--buttonhole-button-size: 2.5rem;
--buttonhole-hole-size: 3rem;
Go on and ditch that dull checkbox!