htmlcsswordpresscustom-wordpress-pagesfigma

Is it possible to make this button in Wordpress maybe through a plugin & how?


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.


Solution

  • 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