Join the Webstudio community

Updated 2 months ago

I NEED this button!

At a glance

The community member is requesting the settings for a button, specifically the "Built with Webstudio" button at the bottom of a page. Other community members provide suggestions, such as copying the settings from a template or adding the button to the components list by default. One community member shares the detailed CSS styles for the button, including the gradient background, border radius, and other properties. The community member who originally requested the settings expresses gratitude for the provided information.

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)
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