How to Style Buttons in Multi WordPress Theme?
To design your website’s default buttons size, style, animation and more, from your WordPress Dashboard go to Appearance > Customize > Buttons and use the following options:
- Border radius – set the button shape using border radius value in pixels. For a round shape, enter a value larger than half of the button’s height.
- Size – set the button size. Choose from small, normal, large, x-large, and xx-large. You can further customize button size using padding options below.
- Mouse over animation – you can add an animation on mouse hover. This option doesn’t apply to Vista button type. Choose from: fade (default), grow from left, grow from left 2, grow from left and right, grow from middle, grow from top, grow from bottom.
- Lift on hover – you can set the button to lift on mouse hover. Enter the amount in pixels.
- Style types – set your button style type. Choose from Flat, Vista, Gradient.
- Padding – set the button’s top, left, bottom and right padding using any CSS-compatible padding value.
- Background – customize button background color and gradient:
- Buttons background color
- Buttons background hover color
- Buttons gradient color
- Buttons gradient color on hover
- Buttons gradient direction
- Buttons gradient direction on hover
- Border – customize button borders width and colors:
- Button top border width
- Button right border width
- Button bottom border width
- Button left border width
- Buttons border color
- Buttons border color on hover
- Text settings
- Button text color
- Buttons text color on hover
- Button text transform – choose from uppercase, lowercase, capitalize, or none.
- Shadow – add and customize button shadow:
- Shadow color
- Shadow blur
- Shadow horizontal offset
- Shadow vertical offset
- Mouse over shadow – add and customize button shadow on mouse hover:
- Shadow color
- Shadow blur
- Shadow horizontal offset
- Shadow vertical offset
