top of page

Giant interactive button

Wix Agency


Feb 5, 2023

Giant interactive button

A call to action that’s impossible to ignore with this giant button that changes on hover.

Learn how to create this design in 14 steps

1. From the Add panel, drag a container into a blank section. From the design tab in the Inspector panel, change the background color and add a border. Adjust the corner radius on all sides to 999px so the container is shaped like a button. 

image of step 1

2. Set the container width to 100% and height to Auto

3. Use the alignment icons to center the container horizontally and vertically in the section. 

4. Add a text element to the container and type in your call to action. 

image of step 4

5. Set the width of the text element to 100%

6. Adjust the font and color. Add Scale text with a range of 40-175px. Center align the text. 

7. Select the container and change the width to Max content

8. Add padding to the container of 5vw to the left and right, and 4.5vw to the top and bottom. 

image of step 8

9. Select the container. From the interactions tab in the Inspector panel, click Add an Effect. Choose a custom one. 

10. In the hover state, change the container’s background color and the text color. 

image of step 10

11. Adjust the timing of the effects to end at 0.1s. Switch to the Initial state and adjust the timing of the effects to 0.1s again. Then, click Done

12. With the container selected, add a trigger on hover. Apply the hover effect you just created. 

13. Select the text element and from the floating action bar click Link to add a link and redirect visitors where you want them to go. 

14. Preview the site. When you hover over the button, the background and text change color. Clicking the button redirects to another page. 

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page