Buttons

Adding buttons to your website is a great way to draw attention to important calls to action for site visitors.

To add buttons to your content, use the button shortcode, which converts basic links into buttons. Buttons on montclair.edu can be displayed in different styles. To change the appearance of a button, use the class attribute. More details on styling of buttons and sample code are below.

Button Colors

When your button is on a white or light-colored background, use the default or “ghost-red” button styles.

Default Appearance

Red background with white label text
This is the default look of a button. Best for use on white or light backgrounds. No button class specified.

To make the button shown above, triple click the code below to select, then copy and paste into the text editor on your WordPress page:

[[button]<a href="URL goes here">Button copy goes here</a>[/button]]

class=”ghost-red”

Transparent background with red label text and outline. Best for use on white or light backgrounds. Set button class=”ghost-red”.

Code sample:

[[button class="ghost-red"]<a href="URL goes here">Button copy goes here</a>[/button]]

When your button is on a dark background, you can use the white and ghost-white classes.

class=”white”class=”ghost-white”

Button Width

You can use the class “full-width” to make the button take up the full width of its container. Here are three buttons in three columns.

Button1

Button2

Button3

The layout above combines buttons with the rows and columns shortcodes. To make an evenly divided row of 3 buttons, copy and paste the code sample below into the text editor on your WordPress page:

[[row][column class="one-third"][button class="full-width"]<a href="URL goes here">Button1</a>[/button][/column][column class="one-third"][button class="full-width"]<a href="URL goes here">Button2</a>[/button][/column][column class="one-third"][button class="full-width"]<a href="URL goes here">Button3</a>[/button][/column][/row]]

If you’d prefer a button’s width to reflect its label length, you can use the buttonrow shortcode. Buttons using this shortcode will display at mixed widths at desktop resolutions, but will stack in consistent widths at mobile resolutions.

A Very Long Button LabelShortAverage Length Button

To make a row of buttons like those shown about, copy and paste this string of short code into the text editor on your WordPress page:

[[buttonrow][button]<a href="#">A Very Long Button Label</a>[/button][button]<a href="#">Short</a>[/button][button]<a href="#">Average Length Button</a>[/button][/buttonrow]]

Additional Code Samples

Buttons with various styles

[[button]<a href="#">Default style</a>[/button]]

[[button class="ghost-red"]<a href="#">Ghost Red Style</a>[/button]]

[[button class="ghost-red full-width"]<a href="#">Full Width Ghost Red Style</a>[/button]]

Buttonrow

[[buttonrow][button]<a href="#">Default style</a>[/button][/buttonrow]]