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

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.

----------

[danimarko]

Webflow is the greatest brand i have ever met

[amitybloc]

glad to hear they also think the auto-under line is terrible. Great video.

[RohitJawale-ip]

what about transparent background applied to section?

[JC-rzyk]

I wrongly assumed we’d be making using of image clipping. Thanks for this!

[mileniliev]

Oh god... Thanks! I have been searching for how to do this thing for about an hour what I was missing is that I had to set up a border-radius on both elements... (not using Webflow but CSS3 - I wasn't really aware what Webflow is until this vid.) You saved my day <3

[tsgrunt]

5 seconds in, already get a chuckle.

I hope you guys get an Addy or something for your videos and scripts. If not, you have my my adoration ( I can make a badge if you desire :p ).

[jspyce]

Love these short tip videos! They’re perfect. Very helpful!

[Atoom]

The failed phone throw made me spit out the water I was drinking

[franckwilzius]

I like these short, funny and very useful lessons

[bamojk]

The Mac Pro Wheels Kit is definitely required for creating this gradient border button.

[shaneomac]

The developers who trash Webflow are so ignorant. They'd rather spend 15hrs of manual coding simply because of their pride. Webflow is freaking incredible. Not to mention the VAST University they have created for free. It also has some of the most unique humor i've ever seen. I absolutely love this product and will never use anything else.

[LutherDePapier]

There's also clip background to padding, but maybe it's not that appropriate on hover for a button.

[KINGknaak]

why can't i just add a gradient to a div block border?

[amelialeon]

This guy is charming, love the quick demo... but $700 for casters?! Sheesh!

[Sabrina-uhfr]

Is there another way to add gradient stroke? possible to change directly the from the color of the stroke selection?

[conafam]

That's great. And because you've used a link block it means that the client can easily update the URL for the link in future. Oh wait, no they can't!

[vivid]

I just have one question, can't find the answer to it. When we create a website on webflow with a CMS backend, can we also export the whole CMS backend along with the website structure with it?

[davidcapuzzo]

How would I create a boarder that just blurs the content underneath?

[robertuszrobi]

one question. I want to use this method to highlight a custom download button inside the header. It would seem something like this: "Download---About---Contact, where the Download button has the gradient borders. Since this is in a Link Block, does that mean I cannot link anything to that text? I would like the visitor to be redirected to another page when clicked. Please help haha

[drpepa]

Is it possible to create a dynamic symmetry grid overlay in Webflow?