6 Pure CSS2 with JSPublished 2026-10-03Free · no sign-up
Hand-written CSS buttons you can copy into any project: primary and secondary actions, a 3D press button, a loading state, a segmented group and a copy-to-clipboard button. Every one has visible keyboard focus, and the animated ones calm down for visitors who ask for reduced motion.
A primary call-to-action with a two-stop gradient and a soft coloured glow that grows on hover. The glow is a blurred pseudo-element behind the button, so the button itself never changes size and nothing around it shifts. Keyboard focus gets the same lift as hover.
An outline button for secondary actions. On hover a solid fill sweeps in from the left while the label switches to the dark ink colour, so the text keeps its contrast at every point of the animation. The sweep is a scaled background layer, which keeps it on the compositor and smooth on slow phones.
A chunky button with a solid bottom edge that sinks when you press it, like a physical key. The depth comes from a hard box-shadow, and the active state moves the button down by exactly the shadow height, so the base stays put. Good for games, quizzes and playful sign-up flows.
A submit button that swaps its label for a spinner while work is in progress, then shows a confirmation. The width is locked during loading so the layout does not jump, the button is disabled to stop double submits, and aria-busy tells screen readers what is happening.
A text button with an inline SVG arrow that slides forward on hover. The arrow is decorative, so it carries aria-hidden and the label alone names the action. Use it for 'Read more', 'Continue' and 'Next step' links where you want a hint of motion without a loud animation.
Three buttons joined into one pill for switching views, such as Day, Week and Month. It is built on radio inputs, so only one option can be on, arrow keys move between options for free, and it works with JavaScript turned off. The selected option uses the accent fill.
A dark button whose border has a moving highlight that travels around the edge. The beam is a rotating conic gradient clipped to the border with a padding-box and border-box background pair, so there are no extra elements. The animation stops for visitors who ask for reduced motion.
A small button that copies text to the clipboard and confirms it with a tick and a 'Copied' label for a moment. It uses the Clipboard API, announces the result through a polite live region for screen readers, and tells the visitor to press Ctrl+C when the browser blocks clipboard access.
document.querySelectorAll('.ttb-copy button').forEach(function (btn) {
var sr = btn.parentNode.querySelector('.ttb-copy-sr');
btn.addEventListener('click', function () {
var text = btn.getAttribute('data-copy');
var done = function (ok) {
btn.textContent = ok ? '✓ Copied' : 'Press Ctrl+C';
btn.classList.toggle('is-copied', ok);
sr.textContent = ok ? 'Copied to clipboard' : 'Copy failed';
setTimeout(function () { btn.textContent = 'Copy'; btn.classList.remove('is-copied'); }, 1600);
};
if (navigator.clipboard) navigator.clipboard.writeText(text).then(function () { done(true); }, function () { done(false); });
else done(false);
});
});
About these CSS Buttons
What makes a good CSS button
A button has one job: to look pressable and say what happens next. Give it a label that names the action ("Save changes", not "Submit"), at least 44 by 44 pixels of tap area on touch screens, and a focus style you can actually see. Hover effects are a bonus for mouse users; they should never be the only way to tell that something is clickable.
Button or link?
Use a <button> when the click does something on the page, such as submitting a form, opening a menu or copying text. Use an <a href> when it takes the visitor to another page. Styling an anchor to look like a button is fine; using a div with a click handler is not, because keyboards and screen readers cannot reach it.
Animating buttons without jank
Animate transform and opacity, not width, height or margins. The demos here move glows, fills and arrows with transforms or on pseudo-elements, so the button never changes size and the content around it never shifts. Keep hover transitions short, between 150 and 300 milliseconds, so the button feels responsive.
How to use these demos
Each demo is scoped with its own class prefix (.ttb-), so you can paste several into one page without collisions. Click Open in editor to change colours and text with a live preview, then copy the result. The colours use the same blue palette as this site; swap the hex values for your brand.
Frequently asked questions
Are these CSS buttons free to use?
Yes. You can copy them into personal and commercial projects. No sign-up and no attribution required.
Do they need a framework?
No. They are plain HTML and CSS. Two demos add a few lines of vanilla JavaScript for the loading and copy states.
Will they work on mobile?
Yes. They use relative layout, readable font sizes and tap areas large enough for a finger. Hover effects simply do not trigger on touch screens; the buttons still work.