Skip to main content

Oregon State Flag An official website of the State of Oregon »

Oregon.gov Homepage

CSS Buttons Guidance

To add a button to your site:

  1. Type the text you wish to be inside your button. 
  2. Highlight the text and navigate to the "Insert" tab of your toolbar. 
  3. Select "Insert Link" and choose either From Sharepoint or From Address. 
  4. Once you have your link, return to the "Format Text" tab on your toolbar. 
  5. Click "Edit Source". 
  6. Within the <a> tag for your link, add any of the class codes listed on this page into your <a> tag as follows: 
        <a href="http://www.yourlinkhere.com" class="odot-btn">Text of your button</a>
  7. Hit OK. 

Examples and Class Codes

ODOT BTN ODOT BTN Simple
class="odot-btn"         class="odot-btn simple"

ODOT BTN Block
class="odot-btn block"


ODOT BTN 1ODOT BTN 2ODOT BTN 3
class="odot-btn three"

ODOT BTN 1ODOT BTN 2
class="odot-btn two"


ODOT BTN Alternate ODOT BTN Alternate Simple
class="odot-btn-alt"                    class="odot-btn-alt simple"

ODOT BTN Alternate Block
class="odot-btn-alt block"


ODOT BTN 1ODOT BTN 2ODOT BTN 3
class="odot-btn-alt three"

ODOT BTN 1ODOT BTN 2
class="odot-btn-alt two"


Previous and Next Buttons :

You may use this to create navigational buttons. You will only need to type "Prev" and "Next", create the links, and the class code below will add the directional arrows. These will also work with the "odot-btn-alt" style and the "simple" style. 



class="odot-btn previous"       class="odot-btn next"