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.
Drag the button below and observe the change in value:
Buttonhole is implemented as a custom element. Include
buttonhole.js on your page and start using the HTML element
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!