Resources

Button Styling

by CreatorFeb 18, 2021 2

WordPress and almost every theme have styling rules for the “button” class. These rules fight to style the buttons across your site. For uniformity the buttons in AMP Publisher block suse the “button” class by default, but then allow you to exclude it and either custom style the button/link as much or little as you wish using a full set of node styling settings.

Sometimes the styling rules are applied to the “button tag” rather than the class. Our buttons are not created using the button tag, and will not support those styles.

Example #1 – Basic Button

The first example is just a basic button in the page, centered and opening a sample pop-up.

• Insert a DOM Button block into the page.
• Open the Button Options panel and enter a PopUp ID into the Link URL or PopUp ID field and turn on the Target PopUp setting. [tutorial] In this example we have a sample pop-up with “popup” as it’s ID.
• Enter button text directly in the block editor. In this example we enter “Example Button” into the button text field.
• Set the Button Alignment to “center” from the block toolbar or Block Settings panel.

Example #2 – Link

The second example just removes the “button” class from the first example, changes the text and bumps up the font size.

• Change the button text to “Example Link”.
• Open the Button Styling panel in the block inspector.
  • Turn off the Apply the “button” Class setting. This will allow you to add custom styling to the link.
  • Scroll down and set the Font Size to 24px using the slider or by entering 24 into the number field.

Example #3 – Custom Styled Button

The last example uses the various styling setting to create a very different looking button.

• Change the button text to “Custom Button”.
• Open the Button Styling panel in the block inspector.
  • Set the Font Color to white.
  • Set the Text Shadow color to black.
  • Turn on the Double Shadow setting. This helps make shadowed text more readable.
  • Choose “Bold” from the Font Weight selector. This also helps make it more readable.
  • Set the Background Color to dark blue.
  • Set the Border Color to black.
  • Set the Border Width to 8px.
  • Under the Border Sides turn off the Right and Left borders.
  • Set the Rounded Corners by Pixels setting to 100px. This will fully round the ends as long as the button height is 50px or less.
  • Set the Shadow Color to white.
  • Turn on the Inset Shadow setting. This will create a framed lighting effect within the button border.
  • Set the Padding to 20px using the slider or by entering 20 into the number field.