Join the Webstudio community

Updated 2 months ago

How do the same button in Webstudio

At a glance

The community member in the post is trying to create a link button, but doesn't know how to do it. The comments provide a suggested solution, which involves setting a gradient background, clipping it to the border and padding, and setting a transparent border. Another community member suggests also setting the origin to border box. However, there is no explicitly marked answer, and one community member indicates they are having a "bad effect" with the suggested solution.

MMr Bean

Hi I love yr button. I'm trying to try it but I don't know how I can realise this link button 🙂

4 comments

JJohn Siciliano

Set a gradient background and select clip -> border
Set another gradient background and select clip -> padding
Set a border with a width and color transparent

You cant have a gradient border in CSS so the workaround is setting two gradient backgrounds and having one stopped before border territory. The border transparent ensure thats there is room for the other gradient to show

MMr Bean

I will try It thanks you John

MMr Bean

I have this bad effect... :/

JJohn Siciliano

Also set the origin to border box

Add a reply