{"id":3562,"date":"2024-12-11T15:56:00","date_gmt":"2024-12-11T20:56:00","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3562"},"modified":"2024-12-11T15:56:00","modified_gmt":"2024-12-11T20:56:00","slug":"buttons","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"

Adding buttons to your website is a great way to draw attention to important calls to action for site visitors.<\/p>\n

To add buttons to your content, use the button<\/strong> 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<\/strong> attribute. More details on styling of buttons and sample code are below.<\/p>\n

Button Colors<\/h2>\n

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


\nDefault Appearance<\/a><\/span>
\n<\/div>

\nRed background with white label text<\/strong>
\nThis is the default look of a button. Best for use on white or light backgrounds. No button class specified.
\n<\/div><\/div>
\nTo make the button shown above, triple click the code below to select, then copy and paste into the text editor on your WordPress page:<\/p>\n
\r\n[[button]<a href="URL goes here">Button copy goes here<\/a>[\/button]]\r\n<\/pre>\n

\nclass=”ghost-red”<\/a><\/span>
\n<\/div>

\nTransparent background with red label text and outline.<\/strong> Best for use on white or light backgrounds. Set button class=”ghost-red”.
\n<\/div><\/div>
\nCode sample:<\/strong><\/p>\n
\r\n[[button class="ghost-red"]<a href="URL goes here">Button copy goes here<\/a>[\/button]]\r\n<\/pre>\n
When your button is on a dark background, you can use the white<\/strong> and ghost-white<\/strong> classes.<\/p>\n
class=”white”<\/a><\/span>class=”ghost-white”<\/a><\/span><\/p><\/blockquote>\n
Button Width<\/h2>\n
You can use the class<\/strong> “full-width” to make the button take up the full width of its container. Here are three buttons in three columns.<\/p>\n
Button1<\/a><\/span><\/div>
Button2<\/a><\/span><\/div>
Button3<\/a><\/span><\/div><\/div>\n
The layout above combines buttons with the rows and columns shortcodes<\/a>. To make an evenly divided row of 3 buttons, copy and paste the code sample below into the text editor on your WordPress page:<\/p>\n
\r\n[[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]]\r\n<\/pre>\n
If you’d prefer a button’s width to reflect its label length, you can use the buttonrow<\/strong> shortcode. Buttons using this shortcode will display at mixed widths at desktop resolutions, but will stack in consistent widths at mobile resolutions.<\/p>\n
A Very Long Button Label<\/a><\/span>Short<\/a><\/span>Average Length Button<\/a><\/span><\/p>\n
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:<\/p>\n
\r\n[[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]]\r\n<\/pre>\n
Additional Code Samples<\/h2>\n
Buttons with various styles<\/h3>\n
\r\n[[button]<a href="#">Default style<\/a>[\/button]]\r\n\r\n[[button class="ghost-red"]<a href="#">Ghost Red Style<\/a>[\/button]]\r\n\r\n[[button class="ghost-red full-width"]<a href="#">Full Width Ghost Red Style<\/a>[\/button]]\r\n<\/pre>\n
Buttonrow<\/h3>\n
\r\n[[buttonrow][button]<a href="#">Default style<\/a>[\/button][\/buttonrow]]\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3562","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3562"}],"version-history":[{"count":3,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3562\/revisions"}],"predecessor-version":[{"id":3657,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3562\/revisions\/3657"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}