Buttonhole: A Button You Can Unbutton
source link: https://thomaspark.co/2023/09/buttonhole-a-button-you-can-unbutton/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Buttonhole: A Button You Can Unbutton
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.
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK