Custom gradient border (inspired by Apple) — Micro lesson #23

While browsing Apple.com's site, you might be like Grímur and want to style elements in your site using beautiful, rainbow gradients. Combining the power of gradients and padding, you can style your elements’ borders to have fully customizable gradient borders in the Webflow Designer.

In this lesson, we're going to duplicate Apple's button and the structure for this is as follows: a Text block with padding on all four sides inside a Link block.

To create the linear gradient border, you'll need to do three things:
1. Add a linear gradient to the Link block
2. Set the Text block's background color to white (the same as your site's background color)
3. Add padding to the Link block on all four sides (hold down Shift to do this at once!)

And as a bonus step, with the Link block selected, you can adjust your typography settings to remove the default blue color and the underline to give it a more modern look.

Clone the button here: https://webflow.com/website/apple-gra...

Explore more about background and spacing in our 101 Crash Course on Webflow University: https://university.webflow.com/course...

----------
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
  / webflow  
  / webflow