If you’re looking to make your website more interactive, adding a sign-up button is a great way to start. Whether you’re encouraging visitors to join your newsletter or download a resource, EverWeb makes it quick and simple to design beautiful, clickable buttons, no coding required.

For this tutorial, you’ll need EverWeb 4.4 or higher for macOS or Windows as we go over the new mouse hover and mousr click animation features.

Building Your Button in EverWeb

In this example, we’ll design a “Sign Me Up!” button that leads to a newsletter page. The layout uses a column container inside a responsive row on a responsive page, perfect for flexible, modern designs.

Start by adding an image from EverWeb’s Free Stock Photos to your container. Add some text beneath it, and then give the container rounded corners and a gradient fill to make it visually appealing.

Now, it’s time to create the button itself.

1. Select your container to make sure the new button appears inside it.

2. Click the Shapes button in the Toolbar.

3. Choose the Default or Rectangle shape. These give you the most customization options.

Once the shape is on the page, type your button text, such as “Sign Me Up!”

Styling Your Button's Text

With your text selected, open the Text Inspector.

• Apply a Paragraph Style or manually select your preferred font, size, and color.

• Adjust the shape’s size so your text fits neatly on one line.

• In the Alignment section, center the text both horizontally and vertically.

• If the text still looks slightly off-center, set After Paragraph to 0 to fix spacing.

Your button text should now be perfectly centered.

Customizing Your Button Design

Next, switch to the Shape Options tab to enhance the button’s look.

• Change the fill color by clicking the color swatch or use a gradient fill for a modern touch.

• Under Borders, check Custom Border Radius and set each corner to 15 to create soft rounded corners. You can also spice things up a little by setting different border radiuses for each corner.

(Note: Custom Border Radius is available only for Default and Rectangle shapes. Rounded Rectangle shapes can be adjusted from the Widget Settings instead.)

You can add a border stroke if you want, but for this call-to-action, let’s make it more dynamic instead.

Adding Mouse Effects to Your Button

Under Mouse Transitions and Animations, choose a Mouse Over animation. EverWeb includes 41 different animations. In this example, try Bounce Out to make your button pop when hovered over.

Set the Transition Time to about 50 for a smooth animation. You can also add a Mouse Down animation if you want extra interactivity.

Add a Link to Your Button

Finally, make your button clickable:

1. Select the button text.

2. Open the Hyperlinks Inspector.

3. Check Enable as Hyperlink.

4. Choose Link to One of My Pages, then select your Sign Up page.

5. Use Hyperlink Formatting to customize how the link looks.

Now your button is ready to lead visitors straight to your sign-up page!

Preview and Publish Your New Design

Click Preview to test the animation and link before publishing. Once you’re happy with it, publish your site and watch your conversions grow.

Creating interactive buttons like this is an easy way to give your website a professional, engaging touch. You can apply these same steps for Buy Now, Learn More, or Contact Us buttons, whatever fits your site’s goals.

Download the latest version of EverWeb to try it yourself.

Follow us for more tutorials and design inspiration:

Instagram: @everwebapp

Facebook: facebook.com/everwebapp

X (Twitter): @everwebapp

EverWeb Video Tutorials