Giant interactive button

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. 

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. 

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. 

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. 

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.