Button
Thanks to this comprehensive menu, you can fully customize the appearance of your site’s buttons. Whether you use classic styles (default) or outline styles, these settings give you total control without any coding.
Each button variant (like Primary, Secondary, Success, etc.) can be styled uniquely. Here is what you can modify:
🔤 Button typography
Font family: choose the font you want to use (you can enter multiple fonts separated by commas to provide fallbacks if a font is unavailable).
Font size: set the size of the text inside the button.
Font weight: adjust the thickness of the text (e.g., 400 for normal, 700 for bold).
Line height: controls vertical spacing between text lines if the text wraps onto multiple lines.
🎨 Colors in normal state
Text color: default color of the button’s text.
Background color: button background.
Border color: color of the button’s border.
🖱️ Hover colors
Text color on hover: changes the text color when hovering.
Background color on hover: changes the background color on hover.
Border color on hover: visible border color when hovering.
✅ Active state colors (on click)
Active text color: button text color when active.
Active background color: background color when the button is clicked.
Active border color: border color visible on click.
🚫 Disabled state colors
Disabled text color: text color when the button is disabled.
Disabled background color: background color in disabled mode.
Disabled border color: border color when the button is disabled.
📏 Dimensions & shapes
Horizontal padding: inner space on the left and right of the content.
Vertical padding: inner space on the top and bottom of the button.
Border width: thickness of the button’s border.
Border radius: rounds the corners of the button (the higher the value, the more rounded the button).
Last updated