Customizing Global Button Settings in Botiga

Want your buttons to look consistent across every page of your Botiga site? The global button settings let you control padding, shape, typography, and colors in one place so every button on the site matches your brand.

In this guide, we’ll walk you through how to configure the global button settings in Botiga.

Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active.

To customize your buttons, go to Customize >> Buttons. These options apply to every button on your site. The following option groups are available.

Paddings and Radius

Use the padding options (Top/Bottom padding and Left/Right padding) to increase or decrease the size of your buttons. These options are responsive, so you can set different padding values for desktop, tablet, and mobile.

To change the shape of your buttons, use the Button radius option. Increase it for rounded buttons or keep it at 0 for rectangular buttons.

Button padding and radius options

Typography

Change the buttons’ font size for desktop, tablet, and mobile, or switch the text-transform property between regular, Capitalize, lowercase, or UPPERCASE.

Button typography options

Colors

The color options are split into two sections: default state and hover state. Every option includes an alpha channel so you can control transparency.

Button color options

Tip: to design ghost buttons (just a border with no background fill), use the background color option and drop the opacity bar to 0.

Ghost button example using zero opacity

That’s it! You’ve successfully configured the global button settings in Botiga.

Next, would you like to fine-tune the colors that sit alongside your buttons? Check out our guide on customizing color options in Botiga to learn more.