8 Free CSS Button Sets (30+ Styles) – Made by uiCookies

Every button set here was designed and coded in-house by uiCookies — our own pack, not a CodePen roundup. Eight sets, thirty-plus individual styles, each set a single self-contained HTML file with inline CSS. Only the loading-state demo uses JavaScript; everything else is pure CSS.

Download all 8 sets (free) Browse live demos

The sets

1. Gradient Buttons

Six gradient treatments: solid fills with colored hover shadows, a gradient border on white, and a continuously flowing animated gradient. Copy the one that fits and delete the rest.

Live Demo

2. Pressable 3D Buttons

Buttons with real travel: a solid lower edge that compresses in two steps on hover and press, plus a round arcade button for the fun of it.

Live Demo

3. Ghost Buttons

Outline buttons that fill on hover — instantly, sliding from the left, or rising from the bottom — done with pseudo-element transforms, not background hacks.

Live Demo

4. Icon Buttons

Arrow-lead CTAs whose icons nudge on hover, a download button with a dipping arrow, circular icon buttons, a rotating FAB, and a working like-counter toggle.

Live Demo

5. Loading-State Buttons

Click and watch: the label swaps, a spinner appears (one variant fills like a progress bar), and the button morphs to a green success state before resetting.

Live Demo

6. Neon Buttons

Sign-glow buttons in cyan, magenta, and lime; a rainbow ring that blurs on hover; and a flickering-sign variant with an interval-timed opacity animation.

Live Demo

7. Neobrutalist Buttons

Thick borders and hard offset shadows that collapse as the button physically travels on press. Six colorways including an inverted dark one.

Live Demo

8. Social Sign-In Buttons

Pixel-correct Google, GitHub, X, and Facebook sign-in buttons with inline SVG logos, plus round share buttons — no icon font, no image requests.

Live Demo

Frequently asked questions

Are these button styles free?

Yes. The whole pack downloads free from the uiCookies pack page — no signup. See the uiCookies license page for attribution details.

How do I add a loading state to a button?

The loading set shows the full pattern: a .loading class disables pointer events, reveals a CSS spinner, and swaps the label; on completion the class flips to .done for a success color. It is about ten lines of JavaScript around pure-CSS states.

Do the social buttons need an icon font?

No — the Google, GitHub, X, and Facebook logos are inline SVG paths inside the buttons, so there are zero extra requests and the logos scale cleanly.

Will these override Bootstrap’s .btn styles?

No. Each set uses its own class names, so you can use them next to Bootstrap buttons or lift just the hover effects onto .btn.

More building blocks: tabs, menus, login forms, and the full template catalog.

Designed & written by Aigars Silkalns

Aigars Silkalns is a Latvian entrepreneur and web developer who founded Colorlib, a hub for distinctive WordPress themes. Trained in technology and design, he began as a freelancer and launched Colorlib in 2013, earning acclaim for user-friendly, modern, responsive themes. A champion of open source, Silkalns shares insights on web trends and entrepreneurship. His mission is to make web design simple and accessible, empowering people worldwide to build professional sites with ease.

XLinkedInMore about uiCookies →