CSS Buttons
90 copy-paste CSS buttons: 3D, neumorphic, brutalist, gradient and retro styles, plus click, loading and success animations. Each one is plain HTML + CSS, recolored and resized with two variables.
How to use these buttons
Open any button, copy the HTML into your markup and the CSS into your stylesheet. Every button is a real <button>, so it is focusable, works with the keyboard and submits forms. No JavaScript is involved, even for the click and state animations.
To change the color, set --btn-color on the button or any ancestor. To change the size, set --btn-size: padding, radius, borders and shadows are all in em, so the whole button scales from that one value.
Press and click effects use :active and :focus-visible, so they play for mouse, touch and keyboard. Every snippet ships with a prefers-reduced-motion rule that turns the motion off for people who asked their OS for less of it.
Frequently asked questions
How do I make a button with HTML and CSS?
Use a real <button>, then set padding, background, border-radius and a :focus-visible style. Every snippet here is a complete button you can paste as is.
How do you add an animation to a button in CSS?
Use transition for state changes such as :hover, :active and :focus-visible, and @keyframes for looping or multi-step motion. Animate transform and opacity so it stays smooth.
How do I make a 3D pushable button?
Stack a darker edge layer under the face, then move the face down on :active so the button looks like it presses into the page. The 3D Pushable Button above is the complete pattern.
How do I make a click ripple effect without JavaScript?
Scale a radial pseudo-element on :active, or play a short keyframe when the button takes focus, from zero to full size while fading it out. The click effect buttons above use this.
How do I make a button round, bigger or transparent?
Use border-radius: 50% with equal width and height for a round button, a larger --btn-size for a bigger one, and a transparent background with a border for an outline button.