Buttons

Table of contents

Overview

The button classes are based off Twitter Bootstrap. Due to colour contrast issues, the colours have been modified to pass WCAG 2.0 accessibility rules. They are styled to match the "message" module classes.

Button styles, as the name sugguests, are meant to be applied to buttons - both input and button. There are certain cases where it may also be appropriate to apply them to links.

Base classes

Button CSS can be applied to a <button>, an <input> or a <a href>:

Button Disabled Class Description
button Standard gray button with gradient
button button-accent Provides extra visual weight and identifies the primary action
button button-info Used as an alternate to the default styles
button button-confirm Indicates a successful or positive action
button button-alert Indicates caution should be taken with this action
button button-attention Indicates a dangerous or potentially negative action
button button-dark Alternate dark gray button, not tied to a semantic action or use
button button-none Maintains the dimensions of a button without creating the visual style

Supporting Classes

Button sizes

A change in button size will affect the button padding and font-size. Be weary of combining the button-* size classes with the font-* size classes, as this may lead to illegible (too small) text.

button-small default button-large button-xlarge

button-small default button-large button-xlarge

View code 
<p>
  <a href="#embedded" class="button button-small">button-small</a>
  <a href="#embedded" class="button">default</a>
  <a href="#embedded" class="button button-large">button-large</a>
  <a href="#embedded" class="button button-xlarge">button-xlarge</a>
</p>
<p>
  <a href="#embedded" class="button button-small button-dark">button-small</a>
  <a href="#embedded" class="button button-dark">default</a>
  <a href="#embedded" class="button button-large button-dark">button-large</a>
  <a href="#embedded" class="button button-xlarge button-dark">button-xlarge</a>
</p>

Disabled buttons

Remove the functionality of a button.

default disabled
View code 
<a href="#embedded" class="button button-disabled">disabled</a>

Embedded navigation

This class allows for embedded page navigation. The navigation may be based off an unordered list or paragraph text. To make the unordered list display horizontally, simply use the menu-horizontal class.

Unordered list

View code 
<ul class="menu-horizontal">
   <li><a href="#embedded" class="button button-accent">Primary Action</a></li>
   <li><a href="#embedded" class="button">Action</a></li>
</ul>

Button

Primary Action Action

View code 
<p>
   <a href="#embedded" class="button button-accent">Primary Action</a>
   <a href="#embedded" class="button">Action</a>
</p>

Button group

Primary Action Action

View code 
<p class="button-group">
   <a href="#embedded" class="button button-accent">Primary Action</a>
   <a href="#embedded" class="button">Action</a>
</p>

Button toolbar

Primary Action Action

Action Action

Help

View code 
<div class="button-toolbar">
   <p class="button-group">
      <a href="#embedded" class="button button-accent">Primary Action</a>
      <a href="#embedded" class="button">Action</a>
   </p>
   <p class="button-group">
      <a href="#embedded" class="button">Action</a>
      <a href="#embedded" class="button">Action</a>
   </p>
   <p class="button-group">
      <a href="#embedded" class="button">Help</a>
   </p>
</div>

Examples

Atopics Btopics Ctopics Dtopics Etopics Ftopics Gtopics Htopics Itopics Jtopics Ktopics Ltopics Mtopics Ntopics Otopics Ptopics Qtopics Rtopics Stopics Ttopics Utopics Vtopics Wtopics Xtopics Ytopics Ztopics

Previouspage of search results 1: Page 1 of search results 2: Page 2 of search results 3: Page 3 of search results 4: Page 4 of search results 5: Page 5 of search results 6: Page 6 of search results 7: Page 7 of search results 8: Page 8 of search results 9: Page 9 of search results 10: Page 10 of search results Nextpage of search results

Table of Contents

Warning: Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris.

Report a problem Learn more

Delete

Did you know?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, ipsum vitae malesuada pellentesque, mauris purus accumsan ipsum, sed porta lectus justo ac mauris.

Continue reading