Buttons and Visibility Classes

Tiny Green Button (h4)

Classes used: button tiny success (for green)

HIT ME

Small Red Button (h3)

Classes used: button small alert (for red)

HIT ME

Default (sized) Radius Round Button (h2)

Classes used: button radius round

HIT ME

Large Disabled Button (h1)

Classes used: button large disabled (for light blue)--but notice with the "disabled" button there is NO HOVER EFFECT

HIT ME

Button Group (h3)

Classes used: button small alert (red) success (green): two buttons wrapped in list items in an ordered list with a class of "button-group"

Slightly Rounded Edged Buttons

We added the class "radius" to the ul container to give our buttons a bit of a border. This added a border radius of 3 pixels to our buttons.

HIDE FOR SMALL (button on right)

We added the class "hide-for-small" to the second (green) button, which makes it disappear on mobile devices. This is called "Visibility Classes"