How to Change the Button Shape in Hostinger Website Builder

Welcome to Ben’s Experience! In this tutorial, we will guide you through the process of editing a button in Hostinger Website Builder. Buttons are essential for navigating your website and enhancing user interaction, so learning how to customize them is a valuable skill.

Step 1: Adding a Button

To start, log into your Hostinger Website Builder and add a button to your page. This initial step is straightforward and will serve as the foundation for your customizations.

Step 2: Editing the Button

Once the button is in place, click on the edit button to begin making changes. Navigate to the “Style” section where you can modify various aspects of the button:

• Text: You can edit the button text to something relevant, such as “Newsletter”.
• Link: Link the button to a specific page or web address.

Step 3: Customizing the Style

In the style section, you can customize the button’s appearance in both its normal and hover states.

• Normal State: Adjust the fill color to a vibrant orange, change the text color to black, and select a font like Roboto Regular. Increase the text size for better readability. You can also add a border color (e.g., red) and make the border width more prominent.
• Hover State: For the hover state, ensure the button’s design changes to engage users when they hover over it. Select a fill color, text color, and border color that differ from the normal state to create a noticeable effect.

Step 4: Adjusting Corner Radius

The button’s shape can be refined by editing the corner radius. This step allows you to make the button’s edges more rounded or sharp, depending on your design preference.

Step 5: Deleting Hover Design

If you decide you don’t want a different design for the hover state, simply set the hover state fill color, text color, and border color to match the normal state. This way, the button’s appearance remains consistent, even when hovered over.

Conclusion:

Editing a button design in Hostinger Website Builder is simple and offers a wide range of customization options. By following these steps, you can create buttons that are visually appealing and align with your website’s branding. Before you go, I have something special for you—two free online video courses! The first course covers Hostinger hosting and WordPress management, and the second teaches you how to use Hostinger Website Builder to create basic websites or online shops. Access them for free by clicking the link in the description. If you enjoyed this tutorial, give it a thumbs up and subscribe to my channel. For any questions, leave a comment below.

Happy editing!