Buttons & forms
Push button
Pure CSSPress it. The edge is a generated box-shadow stack that collapses on :active.
Buttons & forms 6 CSS 3D effects
Every one has a live demo, a step-by-step explanation and code you can edit and paste into your own project.
- 5 pure CSS
- 1 CSS + JS
- No dependencies
- MIT licensed
-
-
Buttons & forms
Rolling button
Pure CSSThe button is a bar with two faces; hover rolls the second one into view.
-
Buttons & forms
Rocker switch
Pure CSSA real checkbox underneath: click, tap or press Space. The rocker tips on :checked.
-
Buttons & forms
Fold-down menu
Pure CSSHover or focus the button: items swing down from their top edge, one after another.
-
Buttons & forms
No-JS tilt
Pure CSSPointer-following tilt without JavaScript: nine invisible hover zones steer the card.
-
Buttons & forms
Pointer tilt card
CSS + JSJS writes the pointer position into custom properties; CSS turns them into tilt, pop-out and glare.