Add Pre-Designed Buttons to Your Site with Butns.css

By Jake Rocheleau. in Web Design. Updated on October 9, 2022.

Frontend frameworks, such as Bootstrap, come with their own button styles, but they don’t usually have much variety.

The free Butns library offers a slew of custom button styles without the whole framework attached. This is perfect for developers who already have a custom page design but don’t want to deal with crafting their own button styles.

You have practically limitless choices and combinations to pick from. Butns has over 30+ different background/border colors that you can mix & match for traditional flat buttons or pill buttons or even ghost buttons.

How to Create 3D Button Flip Animations With CSS

Flip animations are popular CSS effects that show both the front and the back of an HTML element... Read more

You can also pick between different gradient styles that mesh two different colors together. These gradient buttons look awesome with a drop shadow for a raised embossing effect.

Along with colors and shadows, you can also change the shape, size, and transparency of any button.

Everything is controlled via CSS classes, so you really have complete access to everything in the library.

What I like most about Butns is that you can easily switch between different styles just by updating one class name. There’s no overly-complex system of adding styles or editing a stylesheet. You just swap classes, and you’re good to go.

Although there’s no harm in overwriting some of these classes with your own preferences. That’s the beauty of the cascading effect in CSS.

To get started just download the .css file from the Butns home page or from the GitHub repo. They both link to the most up-to-date version so either way is OK.

Once that’s added to your web page, just append the class .button to anything you want to be shaped like a button. From there it’s a matter of adding extra classes based on the colors, size, and style of the button you want.

Take a look at the GitHub page down near the classes list. You’ll find a full list of all classes for customizing the color, button type, and display options like small/large or semi-transparent.

Butns.css is easily one of the most comprehensive button stylesheet on the web. You can add it to multiple web projects, and all of them can have a different look with this one library.

It also plays nicely with other frameworks such as Bootstrap since the classes don’t overlap. So you can merge Butns with almost any other frontend framework on the market with no hassle.