Integrating a button into your webpage is a simple and effective process. Start by selecting the button element and placing it in your editor’s workspace. Once added, you can modify both its design and functionality to fit your website’s layout and user experience requirements. This will ensure the button is seamlessly incorporated into your overall content.
General Button Settings
The button’s configuration is more detailed compared to other elements.
Element Name/Title
When you select a button element, a toolbar appears on the left side of the editor. Here, you can rename the button or give it a custom title for easier navigation as you design your page.
Background Color
To change the background color of your button, click on the button and choose your desired shade. If your preferred color isn’t listed, enter a color code to apply a custom color.
Letter Spacing
Adjust how much space is between the letters on your button by selecting this option.
Text Shadow
You can add a shadow effect to the button text. Choose how light or dark you want the shadow to be.
Font Size for Desktop and Mobile
Control the size of the button’s text separately for mobile and desktop by adjusting the sliders for each.
Sub-Text Font Size for Desktop and Mobile
Similarly, you can modify the size of any sub-text added to the button for both mobile and desktop.
Typography Type
Choose a font for your button text by selecting from preset options or picking a new one from the dropdown menu.
Icon Settings
Icon Before Text
Add an icon to the button by selecting one from the available choices or using the search bar to find the desired icon. The icon will appear before the button text.
Icon After Text
Alternatively, you can place the icon after the button text by choosing this option.
Color Settings
Text Color
Modify the button text’s color, such as for a "Sign Up" label.
Sub-Text Color
You can also change the color of any sub-text added to the button.
Spacing Options
Padding (Top, Bottom, Left, Right)
Adjust how much space surrounds the content within the button by manipulating the padding settings.
Margin (Top and Bottom)
Control the space above or below the button by adjusting the top and bottom margins.
Text Options
Main Text
Here, you can edit or input the button’s main label text.
Sub-Text
If needed, add secondary text beneath the main label by typing it in this field.
Button Actions
Link To
You can link the button to any URL, page, or element by selecting the relevant option.
Theme Settings
Button Themes
Pick a theme for your button by selecting one from the themes tab. Keep in mind that choosing a theme will remove any customizations you’ve previously made.
Advanced Settings
Text Transformation
Change the button text’s format to uppercase, lowercase, or capitalized using the Text Transform option.
Full Width
Enable full-width mode to extend the button across the entire width of its container.
Button Effects
Apply visual effects to your button by choosing from the available effect options.
Button Shadow
Add a shadow effect to your button, adjusting the intensity as needed.
Background Styles
Background Visibility
Decide whether to display the button’s background or remove it to display only text.
Size and Visibility
Vertical and Horizontal Spacing
Control the button’s height and width by modifying these settings.
Visibility on Mobile and Desktop
Select whether the button should be visible on mobile, desktop, or both by toggling the desired option.
Custom Classes and Borders
Custom Class
To apply a custom CSS class to the button, type the class name into the field.
Border Customization
Select from various border styles such as solid, dashed, or dotted. Modify the border’s width, color, and radius for further customization.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article