top of page

Changing grid with gradient buttons

Shir Berkovitz


Feb 5, 2023

Changing grid with gradient buttons

This unique grid with gradient buttons lends to a flowing effect as you resize the screen.

Learn how to create this design in 10 steps

1. On the desktop viewport, add a styled gradient button to your section.

image of step 1

2. From the Inspector panel, set the button height and width to 100%.

image of step 2

3. Under the design tab, click the Fill Picker to choose a gradient. You can also change the gradient on hover using the Button state dropdown above. Then, edit the text.

image of step 3

4. On the tablet viewport, select the section and add a 2X2 grid.

image of step 4

5. From the Quick add tab, add a container to the bottom right grid cell. Then stretch the container so that it takes up the entire cell.

image of step 5

6. Add a 1X2 grid to the recently added container.

image of step 6

7. Then add another container to the bottom cell of the 1x2 grid. Stretch the new container so that it takes up the entire bottom cell, and add a 4X1 grid to it.

image of step 7

8. Fill the grids with additional gradient buttons.

*Tip: Set the button text opacity to 0% to display the gradient only and create an engaging hover effect.

image of step 8

9. On the mobile viewport, you will create an entirely new grid. First, go to the Layers panel, select the previous grid created and click Don’t Display. Then add a 10x20 grid. It’s important to note that deleting a grid will delete it from the site entirely, so be sure to hide the display instead.

image of step 9

image of step 9

10. Add additional gradient buttons to the grid and adjust the design on hover for each one. Then, preview the results to see how the grid changes between breakpoints.

image of step 10

image of step 10

Refresh your skills before you start by visiting Academy X.

More inspiration



Editor X

The rest is up to you.

bottom of page