Share Button
Press Share and the options slide out from behind it, the last one pushing the pill open, while the arrow takes off and a cross draws itself. Copy link turns into a check; X and LinkedIn open in a small window.
View codeThe library
Buttons
12 buttons in plain HTML, CSS and JS, from a fill on hover to hold-to-confirm for the scary ones. Zero packages. Your bundle can relax.
Split Button
The main action on the left, the other options behind an arrow. One tint slides between the halves; pick another way to do it and the label rolls over, the button easing to its new width.
View code
3D Press Button
A button with real thickness: the face sinks into its base, even the quickest tap goes all the way down, and it springs back with a small bounce. A keycap, a brutalist slab, or a toggle that stays down.
View code
Hold to Confirm
For the actions you cannot take back: hold it down and an ink pill fills the button, let go too early and it drains back, hold to the end and it ticks. Mouse, finger, Space or Enter.
View code
Loading Button
A button that shows its work: its words roll from Deploy to Deploying while a ring comes in, then the ring closes on a tick for Deployed. The width never moves.
View code
Magnetic Button
A button that leans towards the pointer as it comes near, its words a little further, and settles back softly. Its click area moves with it. Calm on touch screens.
View code
Copy to Clipboard
A command, or a sentence for your AI, with a copy button: the icon turns into a check that draws itself and the label rolls to "Copied".
View code
Call Button
A round phone icon that opens into a full "Book a call" button, with a little ring. Stays open on touch screens. Pure CSS.
View code
Arrow Button
An arrow that draws itself in on hover, nudges the label aside, then carries on through the button when you leave.
View code
Fill Button
A button that fills from the exact point your cursor enters and empties toward where it leaves, with a rolling label and a looping arrow.
View code
Morph Button
A pill that tightens into a circle on hover while its label gives way to an arrow. The clickable area never moves. Pure CSS.
View code
Roll Button
A button whose label rolls up letter by letter on hover, and keeps rolling the same way when you leave. Plain CSS and a few lines of JS.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it