-1

I got a custom button from a figma project to be implemented in a WordPress website but I am not sure how to make a button that would look like this in WordPress.enter image description here

I tried to use some plugins like MaxButton but can't seem to make a button like the one in the picture.

Ezra
  • 3
  • 1

1 Answers1

0

You're looking at something like this. Ofcourse you need to add some more but this is close.

    .button {display: inline-block; border-radius: 50px; background-color: #e84633; color: white; border: 7px solid #3c3c3b; padding: 10px 40px; text-transform: uppercase; text-decoration: none; font-weight: bold; position: relative;}

    .button::before,
    .button::after {
    position: absolute;
    width: 33px;
    height: 20px;
    content: "";
    }
    .button::before {
    left: -15px;
    top: -15px;
    border-left: 7px solid #3c3c3b;
    border-top: 7px solid #3c3c3b;
    
    border-radius: 50px 0 0 0;
    }

    .button::after {
    right: -15px;
    bottom: -15px;
    border-right: 7px solid #3c3c3b;
    border-bottom: 7px solid #3c3c3b;

    border-radius: 0 0 50px 0;
    }
<a href="" class="button">view location</a>

Useful links:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
  2. https://unused-css.com/blog/css-partial-borders/
  3. Truncated or partial borders with CSS
Pandorumx5
  • 52
  • 3
  • Thank you for your help. I searched online for a way to do it but now I see I was searching for the wrong phrases. I very much appreciate the links at the end. They are exactly what I was trying to find but couldn't. – Ezra Mar 26 '23 at 12:46