Buttons

<a class="button" href="http://example.com/">Text</a>
<button class="button green big">Text</button>
<input type="reset" class="button hover-red" value="Text" />

Defaults

This is the default size and color. Anything is optional, the only requirement to create a button is the class .button. Using this class will define the element as to be a button, other classes will change it's style(color, size, etc.).

default red green blue orange yellow pink purple teal olive gray black primary button Button Button Link

Mix colors

By default the buttons have their styles for passive state, hover and active. But what if you want to mix the colors and have one color for default state and another for hover? It's possible, here are just a few examples.

def/teal red/blue green/purple orange/pink purple/olive olive/gray Link/green

No BG

What if you want to create buttons that looks like links? You can use .nobg class to preserve the background and border only for hover state, and by default to show only show the text with its respective color, nothing more. Here are a few examples:

default red green blue orange yellow pink purple teal olive gray black primary button nobg Button Button

Buttons size

In many different situations the default button size may not be enough. Changing the size is super easy and this require only an additional CSS class. Besides default size, a button can be mini,small, big and huge.

The difference between mini and small is that mini has the minimal possible height and padding and the font size is equal to the body, and the small is almost like default button but the font size is lower and the padding as well.

mini small default big huge

Buttons shape

The buttons can have between 3 different shapes: default, square and rounded corners.

default square rounded

Buttons group

Buttons group is something similar to a toolbar. Button groups does not have any limits, you can combine different colors, size and shapes, but anyway try to not mix different sizes.

Dropdowns

The button is going to perfom more actions or to include more links? No problems, use dropdowns to attach more links to a single button.

Buttons align

A single button can be aligned to left or right. This will float it, so sometimes it may be overlap other elements. Make sure the parrent is cleared properly.

Buttons block align

The buttons block can be aligned to any position. Be it left, center or right, it has all the necesary styles.

Buttons group align

Buttons blocks can contain button groups and this also is not a problem when talking about alignment. The buttons group can be aligned to any position.

Buttons circle

Have two or more choices and not sure what is the best way to show them to your users? Using the circle button you can display them in a beautiful way, and the user will feel the requirement to pick one or another.

Current state

Current state is very usefull when you want to define a button as been active. For exmple if used in a pagination module it can represent the current page number. It intetionatelly does not have any styles for hover state.

Mini buttons

default red green blue orange yellow pink purple teal olive gray black primary

Usage examples:
Edit Delete Lock Publish date Edit Delete Lock Publish date

Pagination example

Creating a pagination module is extremely easy and it offers you full control on it. It allows to combine buttons in groups, align them to the left, center or right, set different colors and button states. It's just easy.