Buttonhole: A Button You Can Unbutton

By admin
Skeuomorphism taken to the extreme rarely works. But it can be fun. Like a turntable interface for playing

YouTube
ORG

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
ORG

, the

UI
ORG

button you can unbutton.

Demo

Drag the button below and observe the change in value:


Details

Buttonhole
PRODUCT

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
CARDINAL

,

0
CARDINAL

,

1
CARDINAL

); –buttonhole-bg-color-right: rgba(0,

0
CARDINAL

,

0
CARDINAL

,

0.7
DATE

); –buttonhole-button-color: yellow; –buttonhole-button-size:

2.5rem
CARDINAL

; –buttonhole-hole-size:

3rem
CARDINAL

;

Go on and ditch that dull checkbox!