<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" />
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.).
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
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:
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
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
The buttons can have between 3 different shapes: default,
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.
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.
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.
The buttons block can be aligned to any position. Be it left, center or right, it has all the necesary styles.
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.
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 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.
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.