Join the Webstudio community

Updated 2 weeks ago

I NEED this button!

Pretty please can you share the settings for this button? I NEED it in my life! (Mainly for the "Built with Webstudio" button at the bottom of the page)
Attachment
Esme_-_CleanShot_2025-05-06_at_14.14.182x.png
O
E
6 comments
hey, you can copy it from a template, e.g. this open project button lets you open and copy anything without even cloning the project
Attachment
image.png
we should probably add it to the components list by default
Sorry, I've got the bottom one - I'm talking about the gradient for the top button on the Webstudio menu
Don't know if this helps?!
Attachment
Esme_-_CleanShot_2025-05-06_at_14.22.032x.png
here you go:

Plain Text
align-items: center;
background-attachment: scroll, scroll;
background-blend-mode: normal, normal;
background-clip: padding-box, border-box;
background-image: linear-gradient(135deg,#4A4EFA 0%,#BD2FDB 66%,#ec59ce 100%), linear-gradient(135deg,#92FDDC 0%,#7D7FFB 31.94%,#ED72FE 64.24%,#FDD791 100%);
background-origin: padding-box, border-box;
background-repeat: repeat, repeat;
background-size: auto auto, auto auto;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
box-sizing: border-box;
color: rgba(251, 252, 253, 1);
column-gap: 0.5rem;
display: inline-flex;
flex-grow: 0;
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
height: 28px;
justify-content: center;
line-height: 1.1;
min-width: fit-content;
row-gap: 0.5rem;
text-align: center;
text-decoration-line: none;
width: 177px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
cursor: pointer;
mix-blend-mode: normal;
opacity: 1;
pointer-events: auto;
user-select: auto;
border: 1px solid transparent;
padding: 0.25rem


paste them in advanced panel on a link tag
Fab! thank you so much πŸ’œ
Add a reply
Sign up and join the conversation on Discord