{"id":1785,"date":"2018-11-03T12:20:00","date_gmt":"2018-11-03T12:20:00","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/?p=1747"},"modified":"2020-09-26T10:10:44","modified_gmt":"2020-09-26T14:10:44","slug":"block-button","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2018\/11\/03\/block-button\/","title":{"rendered":"Block: Button"},"content":{"rendered":"\n
\n
\n

There are 2 different button styles supported by our WordPress theme- Solid (default) and Outline.<\/p>\n\n\n\n

To add a button to your page:<\/strong> While you are on the page you wish to edit, either click on the little [+] icon at the top left of your page or click the [+] symbol after the block where you want to add your button. Type \u201cbutton\u201d in the Block search field to filter all blocks by \u201cbutton\u201d and select the \u201cbutton\u201d block. A button component will load into your page. Add your text to the button and in the right sidebar, select whether you want the default (solid) button or Outline button style.<\/p>\n\n\n\n

You add buttons to your site by selecting the \u201cButton\u201d block and then selecting either the \u201cDefault\u201d style or the \u201cOutline\u201d style from the \u201cStyles\u201d dropdown in the right sidebar.<\/p>\n\n\n\n

Add your hyperlink to the button. You can paste the URL you wish to link to in the \u201clink\u201d entry box that shows up below the button when you add the button block, or, you can start typing the name of the page you want to link to and a WordPress will show a flyout with some page options.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Buttons have two recommended styles: <\/p>\n\n\n\n

\n
\n
Default<\/a><\/div>\n<\/div>\n\n\n\n
\n
Outline<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Avoid long button labels<\/h3>\n\n\n\n

You can also have a button with more text than you should ever use. This is not recommended and is bad usability. We realize that this does happen, that the temptation is great to do something like this, or that someone else is having you make a button like this. Please resist creating long button labels — contact the web team<\/a> if you need support regarding usability.<\/p>\n\n\n\n

A centered button
with more text
than you should
ever put into a button<\/a><\/div>\n\n\n\n
<\/div>\n\n\n\n
A centered button with more text than you should ever put into a button<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

There are 2 different button styles supported by our WordPress theme- Solid (default) and Outline. To add a button to your page: While you are on the page you wish to edit, either click on the little [+] icon at the top left of your page or click the [+] symbol after the block where you … <\/p>\n

Continue reading “Block: Button”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258709,605394],"tags":[],"class_list":["post-1785","post","type-post","status-publish","format-standard","hentry","category-block","category-ux","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"Block<\/a> UX Elements<\/a>","rttpg_excerpt":"There are 2 different button styles supported by our WordPress theme- Solid (default) and Outline. To add a button to your page: While you are on the page you wish to edit, either click on the little [+] icon at the top left of your page or click the [+] symbol after the block where you…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=1785"}],"version-history":[{"count":10,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1785\/revisions"}],"predecessor-version":[{"id":5265,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1785\/revisions\/5265"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=1785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=1785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}