Custom gradient border

Use Link blocks, Text blocks, and padding to create a button with a gradient outline.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

Buttons are a crucial part of website navigation and serve as a call to action. Creating a custom color gradient border around the most important buttons on your website can enhance their visibility and capture visitors’ attention.

In this lesson you’ll learn:

  1. How to create a button
  2. How to apply a linear gradient border
  3. How to match the button color to the page color
  4. How to round out the button

How to create a button

Let’s first create a button and add call-to-action text.

To build the structure of the button:

  1. Drag a Link block from the Add panel onto the Webflow canvas 
  2. Add a Text block inside the Link block
  3. Double click the default text to change it (e.g., “Contact us”)

Let’s adjust the size of the button:

  1. Select the Text block
  2. Open Style panel > Spacing
  3. Add top and bottom padding of 15 pixels, and left and right padding of 30 pixels

Learn more about padding in our spacing lesson.

Good to know: To simultaneously increase or decrease margin or padding on complementary sides of an element, use Option + mouse drag (on Mac) or Alt + mouse drag (on Windows). 
In the Spacing section of the Style panel, 15 pixels of top and bottom padding and 30 pixels of left and right padding have been set.

How to apply a linear gradient border

Now you can add a color gradient border to your custom button.

To add the gradient to the Link block:

  1. Select the Link block
  2. Open Style panel > Backgrounds
  3. Press the “plus” icon to the right of Image and Gradient and choose Linear gradient as the Type. 
  4. Change the Angle of the gradient on the direction dial (e.g., 90 degrees)
  5. Click anywhere on the gradient bar to add a stop 
  6. Click the color swatch below the gradient bar to choose a color for the gradient stop

You can add as many stops and colors as you want — this will create the gradient. Learn more about background gradients.

In the Backgrounds section of the Style panel, the linear gradient bar has 7 stops from left to right and a gradient angle of 90 degrees.

How to match the button color to the page color

You can match the Text block and page backgrounds to make the button appear transparent:

  1. Select the Text block
  2. Open Style panel > Backgrounds
  3. Click the swatch to open the color picker, and select a color to match the color of your page body background (e.g., “white”) 

How to round out the button

Now you can round out the button’s edges:

  1. Select the Link block
  2. Open Style panel > Spacing
  3. Add padding to each of the four sides of the Link block (e.g., 3 pixels)
  4. Select the Text block
  5. Open Style panel > Borders and increase the radius (e.g., 50 pixels)
  6. Select the Link block
  7. Open Style panel > Borders and increase the radius (e.g., 50 pixels)

That’s it! Now you’ve got an amazing custom gradient border!

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?