Anyone know how to create a boarder like this

Design help General
1

Hi, anyone know how I can create a border like this around a button?border button

Your advice would help me a lot thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @Ola_Jay Welcome to the webflow community, Watch this video if you haven’t already

hope it helps :peace_symbol:

3

hI, Thanks I can create what he did in the video but I want to create it exactly like the image i posted. When I put the boaders or shadow the color is just solid but i want the boarder to just be a line with space inside like the imageborder button

4

I’m thinking this might actually be two elements. I haven’t tried this myself but my inclination would be that it’s a button inside of a div. Give the same border to both the button and div, then set the button to relative positioning and adjust the position bottom and right to offset it from the div.

5

Hello Ola_Jay.
Is something like this be helpful?
https://preview.webflow.com/preview/scrapbook-bsn?utm_medium=preview_link&utm_source=dashboard&utm_content=scrapbook-bsn&preview=7c43848b83a157a978742dfc452cc619&mode=preview

6

Yes, but I dont know how you did that. Sorry am new to weblow

7

@bsn0409 is using custom code within an Embed element targeting the button class (in this case, called btn-wrapper):

<style>
.btn-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #e9952e;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: #000000;
}

.btn-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #e9952e;
  top: 4px;
  left: 4px;
  z-index: 1;
}
</style>

If you create an Embed element and include it on the page, you can insert CSS that will not only render on the published site, but also in the Designer. If you don’t mind not seeing this effect while your working in the Designer, you could include it in the <head> code of the Project Settings

8

No issue Ola_Jay. In the preview, you can display the structure and the embedded CSS code. Basically, here are the steps:
1 - create a “link block” and give the style you want. You must set position to “relative”. Set the class to “btn-wrapper” but you can put the name you want. Do not forget to set a background color otherwise the borders of the box below will appear.
2 - inside the link block, insert a text block, style it and set the position to relative and z-index to 5
3 - create an “embed” and insert the CSS code and copy the code above (from @mikeyevin 's post). replace the .“btn-wrapper” class by the class name you entered in step 1.
Hope that helps.
If not, let me know and I will create a clonable project for you.