• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar

Before Header

Why Genesis is the Foundation of Any Smart WordPress Design ↴

Flagship Content

Web design tutorials for service business owners.

  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page

Buttons

These are the settings for the Atomic Blocks, Button block.

You are here: Home / Atomic Blocks settings / Buttons
Square Button
Rounded Square
Circular Button
Extra Large

WordPress has it’s own button block, so why would you use the Atomic Block button?

Size and shape

Sometimes you need a small or large button. The WordPress 5 button block doesn’t have a size option. But as you can see from the buttons above, the Atomic Blocks AB Button block goes from small to extra large.

The AB Button block has three shape options. Square, rounded square and circular.

But no outline style

The Atomic Blocks AB Button block does not have an outline style at the time of writing this post. However, the Atomic Blocks plugin is still new so it’s possible that more styles and features will be added in the future.

I made the button below using the standard WordPress button block. NOT Atomic Blocks!

Outline Style Button

Toolbar in AB Blocks

As with all blocks there are two places to look for settings. When a block is selected, a toolbar appears immediately above the block. (Unless you’ve changed the WordPress settings.)

The AB Button block has options to align the button left, center or right.

You type your button text directly into the button and add the link URL in the box below the button.

Block settings for the AB Button block

  1. Open link in new window: if you’re linking to a page inside your own website, leave this toggled off. If you’re linking to a different website, you might want to toggle the new window option on.
  2. Button Size: choose from small, medium, large & extra large.
  3. Button Shape: choose from square, rounded square & circular.
  4. Button Color: choose the background color for your button.
  5. Button Text Color: make sure you choose a text color that is easy to read over the button background color.
  6. Advanced: Additional CSS Classes can be added here, if you understand CSS.

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

High Quality Hosting

Filed Under: Atomic Blocks settings, Demo Grid

Previous Post: « Spacer Block
Next Post: Block Navigation: Selecting and navigating container, columns & pricing blocks »

Site Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2023 · Mai Law Pro on Genesis Framework · WordPress · Log in