Skip to content
MagicWebBox
Sign in

Buttons

Pure CSS buttons, sorted by style: hover them, then copy the code

1–24 of 134

About this tool

This gallery brings together 134 buttons written in plain HTML and CSS, with no JavaScript or library. They are sorted into twelve categories: solid, outline, gradient, neon, fill, relief, shadow, animated, with icon, links, glass and fun. Every preview reacts on hover, so you can judge the effect before copying the code into your project.

Colors are set at the top of the gallery: the main color and the text color, with a dark or light preview background. In the code, they go through two CSS custom properties, --accent and --on-accent, which you can change later in your stylesheet. Most designs use a button element, while those in the Links category use an a element.

How to use it

  1. Pick a category, or All to see every button.
  2. Set the Color and Text, then a Dark or Light preview Background.
  3. Hover the previews and open the code of the button you like with the icon in its bottom-right corner.
  4. Click Copy HTML and Copy CSS, then paste them into your page and stylesheet.

Frequently asked questions

Do I need JavaScript or a framework?

No. Each button is an HTML snippet plus a self-contained CSS block, hover effects and animations included. They work in any project, with or without a framework, as long as you keep the button class.

How do I change the colors after copying?

The copied CSS starts with a rule that sets --accent and --on-accent to the colors you picked in the tool. Change those two custom properties, in that rule or higher up in your stylesheet, to match your brand.

Can I use these buttons in a commercial project?

The buttons are original MagicWebBox designs, released with the rest of the project under the MIT license. You can reuse them, including in commercial projects, as long as you follow the terms of that license.

Can several of these buttons share one page?

Every design uses the same button class. If you combine several of them, rename the class in each one's HTML and CSS so their styles do not override each other.