Adding a call-to-action button

Here is the progress we have made so far:

I know it looks nothing like the design mockup, but please be patient.

We will get there by the end of this module 🙂

Anyway, next, we need to add a “call to action” button:

We can easily add a button using the “Buttons” block.

0:00

/

1×

To add a button, add the “Buttons” block to the editor and replace the default text with “Download Now – $29”.

Next, we need to center the button.

To achieve this, keep the button selected and click on the “Change items justification” setting from the block’s toolbar and then select the “Justify items center”.

Now, if you notice, the button has a dark-grey color background.

This dark-grey color comes from the Neve theme.

But the mockup has the button with a purple-velvet gradient background color.

To achieve this:

0:00

/

1×

First, make sure that the button is selected so that we can access the “Button” block settings on the sidebar.

Inside it, there is a “Styles” tab.

Click on it because it contains the settings for changing the button’s a
ppearance.

Next, under the “Color” section, click on the “Background” option and switch to the “Gradient” tab.

Now, click on the gradient color, the first item in the first row.

That’s all it takes to change the background color of a button.

Adding a border radius to the button

Finally, I want to add a border radius of 8px to the button.

We can achieve this by using the “Border Radius” setting from the “Styles” tab.

Also, feel free to explore the other appearance settings inside the “Styles” tab for the button.

Here is the final progress for this lesson:

Starting from the next lesson, I will ask you to perform a couple of small challenges.