A set of colorful CSS3 buttons

What is this?

Rainbow is a CSS library for pretty, colorful buttons. It comes with sources written in both Sass and LESS for easy customization. No dependencies on any other third party library. Here's a few examples (scroll down for more):

How do I get it?

You can download it right from this page or you can clone it from GitHub:

Creative Commons CC-BY Rainbow is licensed Creative Commons CC-BY, which means you can freely share and/or modify it for both personal and commercial applications. The only requirement is that you keep the original attribution (the comment at the top of the CSS file).

How do I use it?

If you want to use the library as-is, with just the default buttons (showcased below) then all you need is the CSS file. Include it in your header:

<link rel="stylesheet" type="text/css" href="css/rainbow.css" media="screen">

To create a basic button, all you need to do is use the base rainbow class .rb:

<a class="rb">Button</a>

The library includes a few additional styles: selected, disabled, small and grouped buttons. You get 12 colors included by default, listed below. For a colorful button, include the base class and the desired color:

<a class="rb rb-blue">Blue Button</a>

What's included in the library?

Below you'll find all the button styles and colors included in the library. Every button should have the base rainbow button class .rb. All the other classes add colors or presentation styles and are meant to be used together with the base. To keep the examples uncluttered, only the additional classes are listed.

By default the buttons do not have a fixed width, so they will expand according to their text. Feel free to set one in your own styles if you need to (as these examples have).

There are a few common class names that are sometimes injected by javascript libraries which do not use the rainbow prefix rb-: selected, disabled, small.

Basic buttons

Selected .selected
Disabled .disabled

Grouped buttons

Left .rb-left
Middle .rb-middle
Right .rb-right

Extra styles

Chameleon * .rb-chameleon
Small .small
* A chameleon button's color shows up only on the hover/active states

Basic colors

Red .rb-red
Orange .rb-orange
Yellow .rb-yellow
Green .rb-green
Blue .rb-blue
Purple .rb-purple
Pink .rb-pink

Extra colors

Lime .rb-lime
Mint .rb-mint
Aqua .rb-aqua
Cobalt .rb-cobalt
Rose .rb-rose

How do I add my own colors?

If you'd like more customization - including defining your own colors - then download the full archive. You'll find inside both Sass and LESS source files that can be imported into your own stylesheets. Use whichever one you prefer.

1. In your project's Sass/LESS stylesheet, add the following import at the top:

@import 'rainbow';

Since you're importing Rainbow into your own stylesheet, you no longer need to include its CSS file in your header (as in the basic use example above). Get rid of it.

2. Define your own selector and call the rainbow-button mixin with your custom color:

// Sass
.rb-lightblue { @include rainbow-button(#e6eaf6); }

.rb-lightblue { .rainbow-button(#e6eaf6); }

3. Build the stylesheet and you're good to go. Now you can use your custom color from the compiled CSS:

<a class="rb rb-lightblue">Custom Button</a>

That's it! Enjoy using Rainbow!

Who are you again?

I'm a software engineer looking to fill my free time with little projects like this one. For more - or to contact me - head over to my home page.