This document will show you how to make super cool buttons for your website using “Button Presets” and how to style your button per your requirements.
To access button settings navigate from Kepler admin Customizer > Global > Buttons.
Let’s get started!
What are button presets? #
Button Presets are pre-designed button styles that come with templates.
Think of Button Presets as ready-made button designs that make your buttons look awesome. You can use these presets in your design with a single click.
There are two types of Button Presets available now:
- Solid Buttons: They’ve colors filled in, making them look solid.
- Transparent Buttons: The buttons have borders that define their shape.
Now, each of these buttons has three choices you can pick from.
- Sharp Boxed Corner: There’s the boxed one with sharp corners, the kind of square-ish look.
- Semi-Rounded Corner: Then there’s the semi-rounded corner, where the corners are a bit smoother but not all the way.
- Rounded Corner: Finally, the fully round corners, which, as the name suggests, are all nice and curvy.
Here is what they look like:
How to customize buttons? #
You can further customize the buttons using the options available inside the buttons menu of the customizer.
Here are the options that you have:
- Color: You can change the button text color, background color, and border color for normal and hover conditions using this option. Note that colors with a globe mean color is set from the global color palette.
- Font: The font option lets you change the font family, font weight, font size, capitalization, and font decorations as well. Simply click on the pencil icon next to the font option to open the font menu.
- Padding: This option lets you add a space between the content inside the button and the borders of the button.
- Border Width: This option lets you adjust the thickness of the line that forms the outer edge of the button.
- Border Radius: This option lets you control the smoothness of the corners of the buttons to round off the corners and make them less sharp.
NOTE: It may happen that after changing button style you don’t see updated version. In that case first save/publish updates then open live site to test or reload customizer.
Update other buttons #
A few buttons on the website template are hardcoded and don’t apply settings from Customizer. In that situation, you must edit button/s via Elementor page builder. How to edit buttons with Elementor check here.
