How to customize a button style
In this tutorial, we will guide you through the process of customizing a button style.
Step 1 - Open Website Styles
Click on the "Website Styles" button.
Step 2 - Open Buttons
In the "Website Look & Feel" menu, select "Buttons".
Step 3 - Customize
3.1 - Naming the Style
First, you need to give your button style a name so you can easily recognize it when using it in your project. Click on the "Write your style name here" input field to name it.
A "Button Style" consists of both "Text Style" and "Box Style".
Hover effects for the button background are applied from the Box Style.
Hover effects for the button text can be customized directly within the Button Style Settings.
3.2 - Button Text Style
To change the button's text style choose a predefined text style by clicking on the "Button Text Style" dropdown.
To easily identify and edit the text style being used, click on "Edit Style." This will redirect you to the Typography section.
3.3 - Button Box Style
To change the button’s box style choose a predefined box style by clicking on the "Box Style" dropdown.
To easily identify and edit the box style being used, click on "Edit Style." This will redirect you to the Box Styles section.
3.4 - Hover Text
The button will always have the hover effects defined in the box style (if any exist).
If you want the button text to also have hover effects, enable the "Hover Text" option.
Once enabled, you will have access to several styling options for customizing the text style on hover.
3.4.1 - Hover Text "Font Weight" (bold, thin etc)
To set the font weight of the hover text, click on the "Font Weight" dropdown menu and select your desired option.
3.4.2 - Hover Text "Italic"
To apply an italic style to the hover text, click the "Italic" button.
3.4.3 - Hover Text "Uppercase"
To transform the hover text to uppercase, click the "Uppercase" button.
3.4.4 - Hover Text "Underline"
To underline the hover text, click the "Underline" button.
3.4.5 - Hover Text "Strikethrough"
To apply a strikethrough effect to the hover text, click the "Strikethrough" button.
3.4.6 - Hover Text "Color"
To select a color for the hover text, click on the "Color" icon.
You have two options for selecting a color:
- Brand Colors – Choose from the predefined brand colors you previously added.
- Custom Colors – Select a custom color.
Recommendation: For better organization, we recommend using colors from the Brand Colors palette.Next steps
- how to add a button style
- how to remove a button style
Related Articles
How to change button style
This section will explain how to select and customize a "Button" style. Step 1 Open the "Button Settings" editor. Click "Edit Button" on the hover menu or double-click on the "Button" element you want to customize. In the "Button Settings" editor, ...How to customize a website text style
This tutorial will guide you on how to customize a default, custom or button text style. Info regarding font resize When increasing font sizes, Aphyo automatically resizes all elements across the website to maintain the layout. Font size decreases do ...How to customize a box style
This tutorial will guide you on how to customize a box style. Step 1 - Open Website Styles Click on the "Website Styles" button. Step 2 - Open Box Style In the "Website Look & Feel" menu, select "Box Style" Step 3 - Customize 3.1 - Naming the Box ...How to add a button style
In this article, we will guide you through the process of adding a button style. Step 1 - Open Website Styles Click on the "Website Styles" button. Step 2 - Open Buttons In the "Website Look & Feel" menu, select "Buttons". Step 3 - Add Button Style ...How to remove a button style
In this tutorial, we will guide you through the process of deleting a button style. Step 1 - Open Website Styles Click on the "Website Style" button. Step 2 - Open Buttons In the "Website Look & Feel" menu, select "Buttons". Step 3 - Change to Remove ...