{"id":437,"date":"2020-05-27T04:25:04","date_gmt":"2020-05-27T04:25:04","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=437"},"modified":"2026-07-28T09:25:40","modified_gmt":"2026-07-28T13:25:40","slug":"button-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/button-block\/","title":{"rendered":"Button Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Button block provides a visually appealing way to include styled hyperlinks on a page or post. This block is good for grabbing a reader&#8217;s attention at the end of a paragraph or story, and it prompts them to dig deeper into a site and explore other relevant content. It&#8217;s important to be careful about the placement of a Button block, as readers will typically expect to find it at the end of a complete thought. Placement elsewhere, such as within a paragraph, will typically strike users as an off-putting violation of the conventions of web publishing. See an example of the Button block below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/screen-shot-button-1024x596.png\" alt=\"A screenshot of a webpage showing a button at the end of a section of paragraph text. \" class=\"wp-image-587\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/screen-shot-button-1024x596.png 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/screen-shot-button-300x175.png 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/screen-shot-button-768x447.png 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/screen-shot-button.png 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An example of a button at the end of a paragraph.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add a button, click the &#8220;Add block&#8221; button and choose &#8220;Button&#8221; from the block list. Alternatively, find the block by using the &#8220;Search for a block&#8221; function. For more information on blocks and adding them to a WordPress site, see our <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation on blocks<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/button-pt-1.gif\" alt=\"A GIF demonstrating the process previously described of adding a button block. \" class=\"wp-image-588\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once added, the Button block is easy to set up. Creators simply need to provide a link and call-to-action text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/button-pt-2.gif\" alt=\"A GIF demonstrating how to add text to a button block by clicking on the button block, and adding a hyperlink by clicking on the &quot;link&quot; icon. \" class=\"wp-image-589\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Additional customization is also available through the block settings found in the right-hand menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/button-pt-3.gif\" alt=\"A GIF demonstrating the configuration options available in the right sidebar while editing the button block. \" class=\"wp-image-590\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Functionalities<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In some cases, the styling of the Button block&nbsp;is context-aware. For example, when a YouTube link is placed in the Button block\u2019s URL field, it will stylize the button to display a \u201cplay\u201d icon. This helps tell your site&#8217;s visitors that the button leads to a video.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"396\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/11\/block-button-play-icon-demo.gif\" alt=\"A GIF demonstrating how the button block turns into a &quot;play&quot; button when a YouTube link is inserted. \" class=\"wp-image-1556\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Creators can also add multiple buttons within a single block, and each button can be styled differently (see example below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"317\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/08\/buttons-block-update.jpg\" alt=\"A screenshot of 4 buttons underneath a section of paragraph text, each with different styling available through the advanced options for the block. \" class=\"wp-image-2335\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/08\/buttons-block-update.jpg 852w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/08\/buttons-block-update-300x112.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/08\/buttons-block-update-768x286.jpg 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"A stylish alternative to basic hyperlinks.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[51],"class_list":["post-437","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":11,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/437\/revisions"}],"predecessor-version":[{"id":39932,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/437\/revisions\/39932"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=437"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}