{"id":825,"date":"2026-05-12T20:11:17","date_gmt":"2026-05-12T20:11:17","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?p=825"},"modified":"2026-09-19T23:48:14","modified_gmt":"2026-09-19T23:48:14","slug":"buttons-block","status":"publish","type":"post","link":"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/12\/buttons-block\/","title":{"rendered":"Buttons Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block allows you to add one or more clickable buttons. These are commonly used for links, calls to action, or navigation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find demos and usage guidance for this block on the official <a href=\"https:\/\/wordpress.org\/documentation\/article\/buttons-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Keep in Mind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use clear, descriptive text on buttons so users know what will happen when they click.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons Examples<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-mtsublue-background-color has-background wp-element-button\" style=\"border-radius:95px\">MTSU Blue<\/a><\/div>\n\n\n\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link has-mtsunavy-background-color has-background wp-element-button\" style=\"border-radius:5px\">MTSU Navy<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-1-background-color has-background wp-element-button\" style=\"border-radius:5px\">Accent Color 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-2-background-color has-background wp-element-button\" style=\"border-radius:5px\">Accent Color 2<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-3-background-color has-background wp-element-button\" style=\"border-radius:5px\">Accent Color 3<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-4-background-color has-background wp-element-button\" style=\"border-radius:5px\">Accent Color 4<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-5-background-color has-background wp-element-button\" style=\"border-radius:5px\">Accent Color 5<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-gray-background-color has-background wp-element-button\" style=\"border-radius:5px\">Gray<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-standard-background-color has-background wp-element-button\" style=\"border-radius:5px\">Standard<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-white-background-color has-background wp-element-button\" style=\"border-radius:5px\">White<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" style=\"border-radius:5px\">Not Styled<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Large Block Buttons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A large buttons option is also available. This can be accessed by adding a button then following the below instructions:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Settings section for the block by clicking the button block then the Settings icon&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"44\" height=\"48\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-1.png\" alt=\"Wordpress Settings Icon\"><\/li>\n\n\n\n<li>Click the Styles icon<img decoding=\"async\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/styles.svg\" alt=\"wordpress styles icon\" style=\"width: 44px\"><\/li>\n\n\n\n<li>Select the Large Block option<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-style-big-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-2-background-color has-background wp-element-button\">Large Button 1<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-accent-5-background-color has-background wp-element-button\">Large Button 2<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Buttons block allows you to add one or more clickable buttons. These are commonly used for links, calls to action, or navigation.<\/p>\n","protected":false},"author":4,"featured_media":826,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[23,27,8],"class_list":["post-825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blocks","tag-buttons","tag-design-block","tag-wordpress-blocks"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":1,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/825\/revisions"}],"predecessor-version":[{"id":1101,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/825\/revisions\/1101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media\/826"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/categories?post=825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/tags?post=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}