{"id":239,"date":"2018-06-07T15:07:42","date_gmt":"2018-06-07T15:07:42","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=239"},"modified":"2026-04-01T14:08:06","modified_gmt":"2026-04-01T14:08:06","slug":"buttons","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n<p class=\"type-intro\">Use buttons to attract attention to the primary call to action on a page. Not every link should be a button, only the links that the visitor is <em>most<\/em> interested in given the topic of a page. For example, on a page that explains äçÐÄvlogÃâ·ÑBÕ¾&#8217;s differentiators, the call to action button might be &#8220;Apply&#8221; or &#8220;Request Information.&#8221;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Here&#8217;s an example button:<\/p>\n\n\n<a class=\"cl-button  block-level\" href=\"#\" title=\"\">Explore<\/a>\n\n\n<p>Buttons can be made prominent, so they stand out from other actions on the page:<\/p>\n\n\n<a class=\"cl-button  block-level prominent\" href=\"#\" title=\"\">APPLY<\/a>\n\n\n<p>They can also be styled as disabled, to signal actions that are temporarily unavailable or that may become available in the near future:<\/p>\n\n\n<span class=\"cl-button  block-level disabled\" title=\"\">Sign up starts May 4<\/span>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Button<\/h2>\n\n\n<div style=\"position: relative; width: 100%; height: 0; padding-bottom: 56.25%\">\n\t<iframe src=\"https:\/\/uri.hosted.panopto.com\/Panopto\/Pages\/Embed.aspx?id=1e47e99e-2b48-4cef-8c18-b3cc0168b81e&#038;autoplay=false&#038;offerviewer=false&#038;showtitle=true&#038;showbrand=false&#038;captions=true&#038;interactivity=all\" style=\"border: 1px solid #464646; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box;\" allowfullscreen allow=\"autoplay\" title=\"How to Add a Button - WordPress Tutorial Video\"><\/iframe>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Add a Button<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to Your Dashboard<\/strong><br>Log in to your WordPress dashboard.<\/li>\n\n\n\n<li><strong>Open Your Page<\/strong><br>From the left-hand menu, click <strong>Pages<\/strong>.<br>Hover over the page where you\u2019d like to add a button, then click <strong>Edit<\/strong>.<\/li>\n\n\n\n<li><strong>Add a Button Block<\/strong><br>Click the blue <strong>+<\/strong> button in the top left corner of the page editor.\n<ul class=\"wp-block-list\">\n<li>Type <strong>\u201cButton\u201d<\/strong> into the search bar or find it under the <strong>Component Library<\/strong> section.<\/li>\n\n\n\n<li>Click <strong>Button<\/strong> to add it to your page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Enter Button Text<\/strong><br>Click directly inside the button and type your text.<br>Keep it short and action-oriented (e.g., <em>Learn More<\/em>, <em>Apply Now<\/em>, <em>Contact Us<\/em>).<\/li>\n\n\n\n<li><strong>Add a Link<\/strong>\n<ul class=\"wp-block-list\">\n<li>Select the button text.<\/li>\n\n\n\n<li>Click the <strong>Link<\/strong> icon in the toolbar above the block.<\/li>\n\n\n\n<li>Enter the URL where you\u2019d like the button to lead.<\/li>\n\n\n\n<li>Press <strong>Enter<\/strong> or click <strong>Apply<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Adjust Your Button Settings<\/strong>\n<ul class=\"wp-block-list\">\n<li>Select the button block, then click the <strong>Settings<\/strong> icon in the top right corner.<\/li>\n\n\n\n<li>Click the <strong>Block<\/strong> tab.<\/li>\n\n\n\n<li>Under <strong>Settings<\/strong>, you can adjust:\n<ul class=\"wp-block-list\">\n<li><strong>Style:<\/strong> Choose between <em>Default<\/em>, <em>Prominent<\/em> or <em>Disabled*<\/em>.\n<ul class=\"wp-block-list\">\n<li class=\"small\">*Note: Disabled style is not used often. It signals actions that are temporarily unavailable or that it may become available in the near future (i.e. Sign Up Starts [Date])<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save Your Changes<\/strong><br>When you\u2019re finished, click the <strong>Save<\/strong> button in the top right corner of the screen.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Use buttons to attract attention to the primary call to action on a page. Not every link should be a button, only the links that the visitor is most interested in given the topic of a page. For example, on a page that explains äçÐÄvlogÃâ·ÑBÕ¾&#8217;s differentiators, the call to action button might be &#8220;Apply&#8221; or [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-239","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":29,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/239\/revisions"}],"predecessor-version":[{"id":2948,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/239\/revisions\/2948"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}