How to Create and Use Custom Buttons in Showit

Buttons are one of the most critical design elements on a website. They guide users toward important actions like booking a service, signing up for a newsletter, or making a purchase. A button is an action in your call-to-action formula. While Showit comes with built-in button options, creating custom buttons allows you to better align them with your brand and improve user engagement.

In this guide, I’ll show you how to create and use custom buttons in Showit, covering everything from design techniques to advanced interactivity.

---

1. Understanding Buttons in Showit

Showit treats buttons as text elements inside a shape, meaning you have full control over their design. Instead of a pre-set button component like in other platforms, you create a clickable button using a shape + text or a text box with a click action.

Why use custom buttons?

• More design flexibility
• Ability to add animations and hover effects
• Consistent branding across your website

---

2. Creating a Custom Button in Showit

Step 1: Add a Shape

1. Open Showit and navigate to the page where you want the button.
2. Click on Add Shape in the left toolbar.
3. Choose a rectangle or rounded rectangle, depending on your design.
4. Resize it to match your button size preference.

Step 2: Style Your Button

• Change the fill color to match your brand.
• Adjust the corner radius for rounded edges if desired.
• Add a drop shadow for depth.
• Use gradients or images as a background for a unique look.

Step 3: Add Button Text

1. Click Add Text and type the text with some action (e.g., “Learn More,” “Get Started”).
2. Choose a readable font and adjust the size.
3. Change the text color for contrast (e.g., white text on a dark background).
4. Center the text inside the shape.

Step 4: Group Elements Together

• Select both the shape and text.
• Right-click and choose Group to keep them together as a single button.

---

3. Adding Click Actions to Your Button

Now that you have a styled button, you need to make it functional.

1. Select the grouped button.
2. In the right-side settings panel, scroll to Click Actions.
3. Choose an action type:
   • Page Link – Navigate to another page within your site.
   • External Link – Direct users to another website.
   • Scroll to Section – Move the user to a specific part of the page aka anchor link.
   • Show/Hide Element – Create a pop-up effect.
   • Email or Phone Call – Open an email app or dial a number.
4. Save your changes.

---

4. Creating Hover Effects for Buttons

To enhance user experience, you can create hover effects to make buttons more interactive.

How to Add Hover Effects in Showit

1. Select your button group.
2. Click on the Hover Tab in the settings panel.
3. Modify elements like:
   • Change background color (e.g., lighter shade when hovered).
   • Increase text size slightly for emphasis.
   • Add a shadow or outline to make it pop.
   • Move the button up by a few pixels to create a floating effect.

💡 Tip: Subtle hover effects improve user engagement without being distracting.

---

5. Advanced Button Designs

Adding Icons to Buttons

You can add little icons like arrows or shopping cart symbols to your buttons. Here’s how:

1. Use SVG or PNG icons.
2. Upload the icon as an image.
3. Place it next to the text and group everything together (Right-click and Group).

Gradient and Transparent Buttons

• Instead of a solid fill, use a gradient overlay for a modern look.
• Set the opacity to create a transparent or “glass” effect.

Animated Buttons

You can create animations using Showit’s scroll effects:

1. Apply fade-in when scrolling.
2. Add scale-up on hover for a slight enlargement effect.
3. Use slide-in effects to make buttons appear dynamically.

---

6. Duplicating and Using Buttons Across Your Site

Once you’ve designed a custom button, you don’t need to recreate it from scratch every time. It would be so tedious. Luckily you can duplicate your custom buttons.

How to Reuse Buttons in Showit

• Copy & Paste: Select the button and duplicate it for different sections.
• Use Site Canvas: Save your button as a Site Canvas if you want it to appear consistently across multiple pages (great for CTA buttons in headers and footers).

---

7. Troubleshooting Common Issues

🔹 Button not clickable?

• Make sure the shape is behind the text and not covering it.
• Double-check if a click action has been set.

🔹 Hover effects not working?

• Ensure you are editing the hover state, not the default state.
• Refresh Showit to see the changes take effect.

🔹 Button text wrapping weirdly?

• Adjust text padding within the shape.
• Try a smaller font size or increase the button width.

---

Conclusion

Creating custom buttons in Showit allows for complete creative control over how users interact with your site. Whether you want a simple call-to-action or a fully animated button, Showit gives you the flexibility to design and implement them in a way that enhances your brand.

By using grouped shapes and text, applying hover effects, and integrating animations, you can ensure your buttons are not just functional but also visually engaging. Now it’s your turn! Try making a custom button in Showit and experiment with different styles.

Want People to Actually Click Your Buttons?

👉 Check out our Showit website templates that come with all the buttons pre-designed.