Buttons are essential elements that prompt user actions — whether submitting a form, canceling an operation, or navigating to a different page. This guide walks you through adding and customizing buttons in Kirki.

Adding a Button

Kirki’s built-in button components are responsive across all breakpoints and come ready with interactive states to speed up your workflow right away.

You can also add and fully customize buttons from scratch. To do so, follow these steps:

1. Open the Kirki editor and navigate to the Insert Panel.
2. Head over to the Elements block and find the Base Element.
3. Locate the Button, then drag and drop it onto your editor.

Customizing Buttons

If you want a button that matches your brand’s tone and style, Kirki gives you full control over colors, typography, states, and more.

Colors, Borders, and Button Texts

From the Right Panel, you can update the button’s background color, border, border radius, effects, text font, text size, and more. Refer to the Right Panel Overview to learn more about customization options.

You can also set variable colors, border colors, text styles, fonts, and sizing values to keep your buttons consistent throughout the entire project. To learn more, check out the Variables guide.

Button Link 

To link your button, select it and head over to the top section of the Right Panel, where you’ll find options to add a link and set the navigation destination.

Button States

To define how your button behaves or appears during specific events – such as hover or mouse click – head to the top section of the Right Panel to configure the relevant states.

Creating a Glass Button

A visually inviting button can make all the difference in driving user action. To create a sleek glass button, follow these steps:

1. Drop a button from the prebuilt components.
2. Select the button and go to Right Panel → Design → Style → (+).
3. From the effects, select Glass Effect.
4. Fine-tune the options for a polished glass finish.
5. Update the URL to set where the button navigates.

For further customization, you can also use Kirki’s custom attributes feature to control additional button properties.