Buttons Customizer Options

This article was last updated on the December 21, 2016.

This article will cover the various options for buttons in the WordPress Customizer, these options are global and effect all buttons.

In the WordPress Customizer, click on buttons

Buttons!

Button Style

Before we start looking at the button style options, first this is what our default button looks like currently:

Default Button

There are three button style options which are:

  • 3D
  • Flat
  • Transparent

If we set the button to 3D, our button then looks like this:

3D button

If we set the button style to Flat, our button then looks this:

Flat Button

If we set the button style to transparent, our button then looks like this:

Transparent Button

Button Shape

The next option is for the button shape, we again have three options which are:

  • Square
  • Rounded
  • Pill

Button Shapes

If we set the button shape to Square, our button looks like this:

Square Button

If we set the button shape to Rounded, our button then looks like this:

Rounded Button

If we change our button shape to Pill, our button then looks like this:

Pill Button

Button Size

The next option is for the Button Size.

Button size options

The options available for button size are:

  • Mini
  • Small
  • Regular
  • Large
  • Extra Large
  • Jumbo

The button size defaults to Regular, which looks like this:

Regular size button

If we change the button size to Mini, our button then looks like this:

Button Size Mini

If we change the button size to Small, our button then looks like this:

Button Size Small

If we change the button size to Large, our button then looks this:

Button Size Large

If we change the button size to Extra Large, our button then looks this:

Button Size Extra Large

If we change the button size to Jumbo, our button then looks this:

Button Size Jumbo

Button Colors

The next option is for the button colors, for button border and button text

Button Colors

When you click on Select color, you’ll see a color picker like this:

Color Picker

Now if we set both of those to anything but the default values, the button will completely change color in the preview Customizer area like this:

Colors set

If the button style is anything but transparent there will be another option called Background color, allowing you to set the background color of your button.

If the button style is set to 3D, there will be an additional Button Bottom color option, which will allow you to create the perfect 3D button!

Background color

Hover Colors

The next option in the Customizer for buttons is to set the hover color of the buttons

Hover Color

So at the moment without hovering over our button, it looks like this:

Button not hovered

But when we hover over our button, it looks like this:

Button Hovered

Similar to the button colors, if your button style is anything but transparent, there will be another option displayed for the background color on hover.

If the button style is set to 3D, there will be an additional Button Bottom color option, which will allow you to create the perfect 3D button!

Button Background Hover

Congrats, now you know more about the button options provided in the WordPress Customizer.