{"id":13757096,"date":"2021-10-08T14:16:56","date_gmt":"2021-10-08T14:16:56","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=13757096"},"modified":"2026-05-29T19:16:06","modified_gmt":"2026-05-29T19:16:06","slug":"buttons-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/buttons-block\/","title":{"rendered":"Buttons block"},"content":{"rendered":"\n<p class=\"has-text-align-right has-small-font-size wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks\/\">Go to the List of Blocks<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Buttons block to add one or more buttons to your page or post. This block has been available since WordPress 5.4, when the <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\">button block<\/a> was deprecated.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"930\" style=\"aspect-ratio: 1508 \/ 930;\" width=\"1508\" controls src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/buttons-Kapture-2026-04-08-at-14.15.17.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add a Button block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add the Buttons block to a page, click the<strong> Add block<\/strong> button to open the block inserter pop-up window and choose the Buttons block.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"222\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.19.58-PM.png\" alt=\"add a buttons block by typing slash and choosing buttons from the list\" class=\"wp-image-16367264\" style=\"aspect-ratio:2.8742046010768476;width:313px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.19.58-PM.png 638w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.19.58-PM-300x104.png 300w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use the keyboard shortcut <kbd>\/buttons<\/kbd> to quickly insert a Buttons block.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/\">Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block comes with one individual button block by default. You can customize the text, link, and style for this button. To add more buttons, click the plus <strong>Add block<\/strong> button in the bottom right corner within the Buttons block, and a new button will appear. Note that the new button will follow the same style as the existing button.<\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"block-toolbar-for-entire-block\" class=\"wp-block-heading\">Block toolbar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To view the block toolbar, click on the block, and the toolbar will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every block comes with unique toolbar icons and blocks specific user controls that allow you to manipulate the block right in the editor.The Buttons block has a toolbar for the individual button and a toolbar for the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">For the entire block<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"120\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.21.24-PM.png\" alt=\"Buttons block toolbar\" class=\"wp-image-16367265\" style=\"width:352px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.21.24-PM.png 580w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.21.24-PM-300x62.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The main toolbar for the entire block has the following buttons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform to<\/li>\n\n\n\n<li>Move controls<\/li>\n\n\n\n<li>Change items justification<\/li>\n\n\n\n<li>Change vertical alignment<\/li>\n\n\n\n<li>Align<\/li>\n\n\n\n<li>Options<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Transform to<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"670\" height=\"512\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.22.28-PM.png\" alt=\"Transform controls on buttons block toolbar\" class=\"wp-image-16367266\" style=\"width:355px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.22.28-PM.png 670w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.22.28-PM-300x229.png 300w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the Transform button to convert the Buttons block into a Group, Details or Columns block.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Move tools<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"120\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/moving-Screenshot-2026-04-08-at-2.21.24-PM-copy.png\" alt=\"Buttons block toolbar block moving tools\" class=\"wp-image-16367269\" style=\"width:357px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/moving-Screenshot-2026-04-08-at-2.21.24-PM-copy.png 580w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/moving-Screenshot-2026-04-08-at-2.21.24-PM-copy-300x62.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the block-moving tools to move the Buttons block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>drag<\/strong>&nbsp;or&nbsp;<strong>six dots<\/strong>&nbsp;icon allows you to freely reposition the block anywhere within the editor by holding the icon and dragging it to the new location.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use the&nbsp;<strong>arrow icons<\/strong>&nbsp;to move the block up or down within the group of nested blocks or when there are multiple blocks.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/documentation\/article\/moving-blocks\/\" target=\"_blank\">Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Align<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"466\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.30.04-PM.png\" alt=\"Buttons block toolbar align options\" class=\"wp-image-16367272\" style=\"width:464px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.30.04-PM.png 780w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.30.04-PM-300x179.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.30.04-PM-768x459.png 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the change alignment tool to align the Buttons block. Choose one of the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>None \u2013 leaves the block the current size.<\/li>\n\n\n\n<li>Wide width \u2013 increase the width of the block beyond the content size.<\/li>\n\n\n\n<li>Full width \u2013 extend the block to cover the full width of the screen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The \u201cWide width\u201d and \u201cFull width\u201d alignment settings must be enabled by your WordPress theme.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Change items justification<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"393\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/justify-Screenshot-2026-04-08-at-2.37.56-PM-1024x393.png\" alt=\"Buttons block toolbar showing Justification toolbar with Justify items center\" class=\"wp-image-16367276\" style=\"aspect-ratio:2.605621119484336;width:658px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/justify-Screenshot-2026-04-08-at-2.37.56-PM-1024x393.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/justify-Screenshot-2026-04-08-at-2.37.56-PM-300x115.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/justify-Screenshot-2026-04-08-at-2.37.56-PM-768x295.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/justify-Screenshot-2026-04-08-at-2.37.56-PM.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The items justification setting allows justifying the buttons to the left, center, or right. There is also an option to \u201cSpace between items\u201d. If it is selected, the Buttons<strong> <\/strong>block will be centered with equal spacing between the buttons.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Change vertical alignment<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"862\" height=\"528\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/align-Screenshot-2026-04-08-at-2.43.02-PM.png\" alt=\"Buttons block toolbar change vertical alignment controls with Stretch to fill selected\" class=\"wp-image-16367278\" style=\"aspect-ratio:1.6325948803230979;width:456px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/align-Screenshot-2026-04-08-at-2.43.02-PM.png 862w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/align-Screenshot-2026-04-08-at-2.43.02-PM-300x184.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/align-Screenshot-2026-04-08-at-2.43.02-PM-768x470.png 768w\" sizes=\"auto, (max-width: 862px) 100vw, 862px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the change vertical alignment option to align buttons vertically with four possible options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Align top<\/li>\n\n\n\n<li>Align middle<\/li>\n\n\n\n<li>Align bottom<\/li>\n\n\n\n<li>Stretch to fill&nbsp;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">More options<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\">More Options menu<\/a>&nbsp;represented by&nbsp;<strong>three vertical dots on the far right of the toolbar<\/strong>&nbsp;gives you more features such as the ability to duplicate or remove a block.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">For an individual button<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"229\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.46.33-PM-1024x229.png\" alt=\"Block toolbar for Button block inside a Buttons container block\" class=\"wp-image-16367282\" style=\"aspect-ratio:4.4717748495200915;width:615px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.46.33-PM-1024x229.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.46.33-PM-300x67.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.46.33-PM-768x172.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.46.33-PM.png 1144w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you select a specific button, a new toolbar will appear with these new options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Change block style<\/li>\n\n\n\n<li>Block-moving tools<\/li>\n\n\n\n<li>Align block<\/li>\n\n\n\n<li>Justification<\/li>\n\n\n\n<li>Vertical alignment<\/li>\n\n\n\n<li>Align text<\/li>\n\n\n\n<li>Link<\/li>\n\n\n\n<li>Bold<\/li>\n\n\n\n<li>Italic<\/li>\n\n\n\n<li>More Rich Text controls<\/li>\n\n\n\n<li>Options<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Change block style<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.49.52-PM-1024x375.png\" alt=\"Change block styles for individual block\" class=\"wp-image-16367285\" style=\"aspect-ratio:2.7307768726405723;width:466px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.49.52-PM-1024x375.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.49.52-PM-300x110.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.49.52-PM-768x281.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-2.49.52-PM.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the change block style option to change the style of a particular button.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Link<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"103\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/link-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png\" alt=\"Button block toolbar link control\" class=\"wp-image-16367286\" style=\"aspect-ratio:9.943208536805932;object-fit:cover;width:615px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/link-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/link-Screenshot-2026-04-08-at-2.52.43-PM-copy-300x30.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/link-Screenshot-2026-04-08-at-2.52.43-PM-copy-768x77.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/link-Screenshot-2026-04-08-at-2.52.43-PM-copy.png 1138w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Use the link option to add a link to the button. It\u2019s also possible to set it to open the link in a new tab<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/link-editing\/\">Read about more link editing options.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bold and Italics<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"103\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png\" alt=\"Button block toolbar with Bold and Italic\" class=\"wp-image-16367289\" style=\"aspect-ratio:9.943208536805932;object-fit:cover;width:615px\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy-1024x103.png 1024w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy-300x30.png 300w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy-768x77.png 768w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/bold-Screenshot-2026-04-08-at-2.52.43-PM-copy.png 1138w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can select the text of the block and use the \u201cBold\u201d option or \u201cCtrl+B\u201d \/ \u201cCmd+B\u201d on your keyboard to bold it, which is usually heavier than the surrounding text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can select the text of the block and use the \u201cItalic\u201d option or \u201cCtrl+I\u201d \/ \u201cCmd+I\u201d on your keyboard to italicize it, which usually appears slanted to the right.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">More rich text options<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The drop-down menu to the left of the&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">More options menu<\/a>&nbsp;contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-text-editing-overview\/\">Read about more rich text editing options.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">More options<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\">More Options menu<\/a>&nbsp;represented by&nbsp;<strong>three vertical dots on the far right of the toolbar<\/strong>&nbsp;gives you more features such as the ability to duplicate or remove a block.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/more-options\/\">Read about these and other settings.<\/a><\/p>\n\n\n\n<div style=\"height:41px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 id=\"block-settings-for-entire-block\" class=\"wp-block-heading\">Block settings <\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"122\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.15.59-PM.png\" alt=\"The settings button at the top right corner of editor\" class=\"wp-image-16367292\" style=\"aspect-ratio:4.820600858369099;width:415px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.15.59-PM.png 588w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.15.59-PM-300x62.png 300w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The block settings panel contains customization options specific to the block. To open it, select the block and click the <strong>Settings <\/strong>button next to the <strong>Publish <\/strong>button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the entire Buttons block is selected, you have the Layout, Typography, Dimensions, and Advanced customization settings.<\/p>\n\n\n\n<h3 id=\"block-settings-for-entire-block\" class=\"wp-block-heading\">Buttons block settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the entire Buttons block is selected, you have several settings for customization.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.22.07-PM-376x1024.png\" alt=\"Buttons Block settings \" class=\"wp-image-16367297\" style=\"width:261px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.22.07-PM-376x1024.png 376w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.22.07-PM-110x300.png 110w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.22.07-PM.png 566w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM-281x1024.png\" alt=\"Buttons block styles\" class=\"wp-image-16367299\" style=\"width:261px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM-281x1024.png 281w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM-82x300.png 82w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM-421x1536.png 421w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM-562x2048.png 562w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.23.53-PM.png 582w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block provides layout settings to change item justification and orientation.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"279\" src=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image.png\" alt=\"Layout settings for the buttons block\" class=\"wp-image-16355811\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image.png 486w, https:\/\/wordpress.org\/documentation\/files\/2023\/03\/image-300x172.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When a specific button from the Buttons block is selected, you have the Styles, Width, Color, Typography, Dimensions, Border, and Advanced customization settings.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/layout-settings-overview\/\">This article provides details about layout settings.<\/a>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block provides Color settings options to change the text and background colors<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"> <a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block<em> <\/em>provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dimensions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block provides dimensions settings options to change padding and margin size.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Learn more about dimension controls.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Border<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Border settings provide options to control the width and radius for the Buttons block.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Learn more about border settings.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), and Styles.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Individual button block settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When an individual button is selected there are several settings and styles you can apply.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.28-PM-287x1024.png\" alt=\"Button block settings\" class=\"wp-image-16367304\" style=\"width:266px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.28-PM-287x1024.png 287w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.28-PM-84x300.png 84w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.28-PM-430x1536.png 430w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.28-PM.png 566w\" sizes=\"auto, (max-width: 287px) 100vw, 287px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"1024\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.03-PM-271x1024.png\" alt=\"Button block styles\" class=\"wp-image-16367303\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.03-PM-271x1024.png 271w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.03-PM-79x300.png 79w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.03-PM-407x1536.png 407w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.28.03-PM.png 584w\" sizes=\"auto, (max-width: 271px) 100vw, 271px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Width settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each button can have its own width setting inside the Button block based on a % value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Buttons block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), HTML element, Link relation, and Styles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the <strong>Link relation<\/strong> setting to add a <code>rel<\/code> attribute to the button link. This tells browsers and search engines what the relationship is between your page and the page you are linking to. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To learn more about common values, such as <code>nofollow<\/code>, <code>noopener<\/code>, and <code>noreferrer<\/code>, refer to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/rel\">MDN\u2019s documentation on the rel attribute<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/advanced-settings-overview\/\">Learn more about advanced settings<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Styles settings<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"554\" height=\"296\" src=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.48.59-PM.png\" alt=\"Button style variations\" class=\"wp-image-16367308\" style=\"width:329px;height:auto\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.48.59-PM.png 554w, https:\/\/wordpress.org\/documentation\/files\/2021\/10\/Screenshot-2026-04-08-at-3.48.59-PM-300x160.png 300w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s possible to change the individual button style depending on your theme. Hover over a particular style to see how a style such as fill or outline will look.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Color<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The Button block provides Color settings options to change the text and background colors<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"> <a href=\"https:\/\/wordpress.org\/documentation\/article\/colors-settings-overview\/\">See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Typography<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The Button block<em> <\/em>provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/typography-settings-overview\/\">Get more details about changing typography settings.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Dimensions<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The Button block provides dimensions settings options to change padding and margin size.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/\">Learn more about dimension controls.<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Border &amp; Shadow<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Border settings provide options to control the width and radius for the Button block. You can also apply a shadow.<\/p>\n\n\n\n<p class=\"has-text-align-left has-background wp-block-paragraph\" style=\"background-color:#e5f5fa\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/border-settings-overview\/\">Learn more about border &amp; shadow settings.<\/a><\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div id=\"changelog\" class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#dce5ec\">\n<h2 id=\"changelog\" class=\"wp-block-heading has-large-font-size\">Changelog<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Updated 2026-05-25 (props @kjoyner @awetz583)\n<ul class=\"wp-block-list\">\n<li>Updated &#8220;Advanced&#8221; section to refer to new overview page<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2026-04-08 (props to @karks88 @zunaid321 @ShatilKhan @lumiblog @karthickmurugan @awetz583)\n<ul class=\"wp-block-list\">\n<li>Added shadow setting for button block<\/li>\n\n\n\n<li>Updated images and video<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2025-12-02\n<ul class=\"wp-block-list\">\n<li>Added HTML Element under Advanced section (props to @annezazu)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-11-21\n<ul class=\"wp-block-list\">\n<li>Updated screenshots for 6.4<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-11-11\n<ul class=\"wp-block-list\">\n<li>Updated title in sentence case <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-06-09\n<ul class=\"wp-block-list\">\n<li>Replaced &#8220;More rich text options&#8221; section with short summary linking to new dedicated page for rich text editing options.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2023-03-07\n<ul class=\"wp-block-list\">\n<li>Revised formatting for the whole article<\/li>\n\n\n\n<li>Updated content and all screenshots for 6.2<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-11-22\n<ul class=\"wp-block-list\">\n<li>Change alignment for images <\/li>\n\n\n\n<li>Replaced redundant content<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-08-18\n<ul class=\"wp-block-list\">\n<li>Updated content, screenshots, and videos for 6.0.<\/li>\n\n\n\n<li>Added explanation for adding individual buttons and style preservation.<\/li>\n\n\n\n<li>Added new block toolbar options.<\/li>\n\n\n\n<li>Added images and info for space between items and change vertical alignment.<\/li>\n\n\n\n<li>Added details for the block settings sidebar info.<\/li>\n\n\n\n<li>Updated info for the More options for the individual button block.<\/li>\n\n\n\n<li>Removed Text Color from the block toolbar for the individual button block.<\/li>\n\n\n\n<li>Added ALT tags for the images.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Updated 2022-02-15\n<ul class=\"wp-block-list\">\n<li>Updated screenshots to 5.9<\/li>\n\n\n\n<li>Updated video to 5.9<\/li>\n\n\n\n<li>Added new settings for previous versions<\/li>\n\n\n\n<li>Added Live example<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Go to the List of Blocks Use the Buttons block to add one or more buttons to your page or post. This block has been available since WordPress 5.4, when the button block was deprecated. Add a Button block To add the Buttons block to a page, click the Add block button to open the [&hellip;]<\/p>\n","protected":false},"author":5735912,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,88],"class_list":["post-13757096","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-design-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13757096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=13757096"}],"version-history":[{"count":54,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13757096\/revisions"}],"predecessor-version":[{"id":16368657,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/13757096\/revisions\/16368657"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/cguntur"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=13757096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=13757096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}