Default button

Buttons work with the <button> or <a> tags

Button

              <button class="button">
                Button
              </button>
            

 

Button

              <a href="#" class="button">
                Button
              </a>
            

Button rounded

Using modifer '--rounded'

Button

                 <button class="button button--rounded">
                   Button
                 </button>
               

CTA button

Example shows button with a modifer '--cta' for CTA button & one with the extra modifier for the rounded style

Button

                 <button class="button button--cta">
                   Button
                 </button>
               

 

Button

              <button class="button button--rounded button--cta">
                Button
              </button>
            

CTA button

Example shows button with a modifer '--alert' for alert/red button

Button

              <button class="button button--alert">
                Button
              </button>
            

Light button

Example shows button with a modifer '--light' for light (grey in this case) button

Button

              <button class="button button--light">
                Button
              </button>
            

Dark button

Example shows button with a modifer '--dark' for dark button

Button

              <button class="button button--dark">
                Button
              </button>
            

Outline button

Example shows button with a modifer '--outline' for outlined button + '--rounded' for rounded version + diff colourways

Button

              <button class="button button--outline">
                Button
              </button>
            

 

Button

              <button class="button button--cta button--rounded">
                Button
              </button>
            

 

Button

              <button class="button button--cta button--cta">
                Button
              </button>
            

 

Button

              <button class="button button--outline button--alert">
                Button
              </button>
            

 

Button

              <button class="button button--outline button--light">
                Button
              </button>
            

 

Button

              <button class="button button--outline button--dark">
                Button
              </button>
            

Disabled button

Example shows button with a modifer '--disabled' for disabled button

Button

                 <button class="button button--disabled">
                   Button
                 </button>
               

Icon button

Example shows button with a modifer '--icon' for icon + text
Icon added using material icon

add Button

              <button class="button button--icon">
                <i class="material-icons">add</i>
                Button
              </button>
            

 

add Button

              <button class="button button--icon button--cta">
                <i class="material-icons">add</i>
                Button
              </button>
            

Button small

Using modifer '--small'

Button

              <button class="button button--small">
                Button
              </button>
            

 

Button

                 <button class="button button--small button--rounded">
                   Button
                 </button>
               

Plain button

Example shows button with a modifer '--plain' for a very basic, plain button

Button

Button full width

Using modifer '--full-width'

Button

              <button class="button button--full-width">
                Button
              </button>
            

Back button

Example shows button with a modifer '--back' for back icon + text

keyboard_arrow_leftBack

              <button class="button button--back">
                <i class="material-icons">keyboard_arrow_left</i>
                Button
              </button>
            

Link button

Example shows button with a modifer '--link' for a plain link

A href link here
Button link here

              <a href="#" class="button button--link">Link</a>
              <button class="button button--link">Link</button>
            

Icon buttons

Round icon button uses class 'icon-button' with modifier '--round'
Search button uses modifier '--search'

add

              <button class="icon-button icon-button--round">
                <i class="material-icons">add</i>
              </button>
            

 

more_vert

              <button class="icon-button">
                <i class="material-icons">more_vert</i>
              </button>
            

 

search

              <button class="icon-button icon-button--search">
                <i class="material-icons">search</i>
              </button>
            

 

close

                 <button class="icon-button icon-button--close">
                   <i class="material-icons">close</i>
                 </button>
               

 

 

Animated menu button for use with responsive nav. Vissible on screens below 1024px

                  <button class="icon-button icon-button--menu" id="menu-button" onclick="toggle_visibility('responsive-nav');">
                    <span></span>
                    <span></span>
                    <span></span>
                  </button>