Skip to main content

Large Buttons

Simple Primary Success Information Warning Danger Link

Small Buttons

Simple Primary Success Information Warning Danger Link

Extra Small Buttons

Simple Primary Success Information Warning Danger Link

Buttons With Icons

There are a number of icons that can be added to a button.

Donate Now Our Location

Full Width Buttons

Create block level buttons—those that span the full width of it’s containing element—by selecting the make block option.

Default Primary Success Information Warning Danger

How to Add a Button

  1. Place your cursor in the location where you wish to add the button.
  2. Select Button from the Content Elements dropdown menu, under Basic Elements.
  3. If you don’t see the Content Elements Plugin button, (as shown in the step above), click the Toolbar Toggle button. The Toolbar Toggle button shows and hides a collection of buttons in the editor.
    Toolbar Toggle View
  4. Once you have clicked on the button shortcode option, a dialog box will appear that allows you to style your button.
    • Style – The style options all correlate to the color of the button.  There are 7 color options:
      1. Simple = White button
      2. Primary = Dark blue button
      3. Success  = Green button
      4. Information = Light blue button
      5. Warning = Yellow button
      6. Danger = Red button
      7. Link = Clear button
    • Size – select which size button you want
    • Type – leave set to Link so you can add a url the button will link to.
    • Select Icon – you can select an icon to add to the button
    • Icon Alignment – you can align the button to the left or right of the button
    • Icon Color – make sure you select a color that has plenty of color contrast
    • Make Block – the button will expand to the full width of its containing element (the content area of the page, the width of a column or whatever the button sits inside.  It also forces the button to sit on it’s own line.  In other words, nothing else can sit on the same line as the button (even though it may appear that it can in the editor). You can use this option to make your buttons a uniform size.
    • Title – add the text you want displayed on the button here.
    • Link – replace the pound sign (#) with the url the button will link to.
  5. Click the Insert Button button and some shortcode will be added to the page.

Examples

Writing Skills Development Program

They use columns to create the two and three column layouts and then placed multiple buttons in each column. They used the Make Block option to make the buttons a uniform size. See this example live on the Writing Skills Development Program web site.

Center for Aging and Health

They use white buttons in the footer of their site. See this example live on the Center for Aging and Health web site.

button shortcode example 2

Department of Psychiatry

They use several orange buttons on the body content of their home page as well as blue buttons in their site footer. See this example live on the Department of Psychiatry web site.

button shortcode example 3