Photo of desk with computer monitor displaying Montclair State University website.

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.


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.

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

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.

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 display at consistent widths in a stacked layout at mobile resolutions.

A Very Long Button LabelShortAverage Length Button

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]