Greenwire buttons
Buttons get a standard .button class, the element type is not of influence on its appearance
Default button
button
Show source code
<a href="#" class="button"> button </a>
Primary button
primary button
Show source code
<a href="#" class="button btn-primary"> primary button </a>
Button hovered
Buttons will have a dropdown shadow when hovered.
button hovered
button hovered
Show source code
Show source code
<a href="#" class="button hover"> button hovered </a>
Active button
Buttons will appear pressed (with an inset shadow) when active.
active button
active button
Show source code
Show source code
<a href="#" class="button"> active button </a>
Disabled button
disabled button
Show source code
<a href="#" class="button" disabled="disabled"> disabled button </a>
Block button
Block buttons span the full width of a parent element
block button
Show source code
<a href="#" class="button btn-block"> block button </a>
Small button
small button
Show source code
<a href="#" class="button btn-s"> small button </a>
Large button
large button
Show source code
<a href="#" class="button btn-l"> large button </a>
Button icon
Buttons can be combined with any icon. Icons should be placed inside the button as an <i>
login
subscribe
Show source code
<a href="#" class="button">
<i class="icon-login"></i>
login
</a>
Small icon - no text
Buttons with no text and small, used in interface
Show source code
<a href="#" class="button btn-s">
<i class="icon-check"></i>
</a>
<a href="#" class="button btn-s">
<i class="icon-cancel"></i>
</a>