Adding a Button to Your Web Page

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.