Pro: CSS for corner-only border on buttons

[jchurch7]

Hi,

I’m trying to make the border for my buttons be just the corners. I’ve managed to get the upper left and right corners to appear, but I can’t get the bottom left and right corners to work. Any help is appreciated. See image & CSS below:

CURRENT CSS:
.x-btn {
margin: 20;
background: none;
border: none;
padding: 10px;
box-sizing: content-box;
border: 1px solid transparent;
}

.x-btn::before, .x-btn::after, span::before, span::after {
display: block;
content: “”;
width: 20px;
height: 20px;
position: absolute;
}

.x-btn::before {
top: -1px;
left: -1px;
border-top: 1px solid black;
border-left: 1px solid black;
transition: 0.5s all;
}
.x-btn::after {
top: -1px;
right: -1px;
border-top: 1px solid black;
border-right: 1px solid black;
transition: 0.5s all;
}
.x-btn span::before {
bottom: -1px;
left: -1px;
border-bottom: 1px solid black;
border-left: 1px solid black;
transition: 0.5s all;
}
.x-btn span::after {
bottom: -1px;
right: -1px;
border-bottom: 1px solid black;
border-right: 1px solid black;
transition: 0.5s all;
}

.x-btn:hover::before, .x-btn:hover::after {
width: 100%;
height: 100%;
}

.x-btn:hover span::before, .x-btn:hover span::after {
width: 100%;
height: 100%;
}
.x-btn: hover {
border: 1px solid black;

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[jchurch7]

Hi Joao,

Here is the link to our dev site: http://dev.twboswell.com
The button I’m working on with the CSS is on the home page below the hero image.

Thank you for your help!
Jessi

[lely]

Hi Jessi,

Let’s add those style on specific class so it will not affect all buttons on the entire site. Please add the following CSS instead and remove your current custom CSS for this buttons.

  .corner-border-only span{
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 5 !important;
   }
   .corner-border-only {
        position: relative;
        display: inline-block;
        width: auto;
        margin: 0 auto 50px;
        padding: 10px !important;
        border: 1px solid black !important;
        background: transparent !important;
    }
    .corner-border-only::before {
         width: calc(100% + 50px + 2px - 108px);
         height: calc(100% + 2px);
         top: -1px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 1;
     }
    .corner-border-only::before, .corner-border-only::after {
         content: '';
         position: absolute; 
         background: #eee;
    }
   .corner-border-only::after { 
        height: calc(100% + 75px + 2px - 120px);
        width: calc(100% + 2px);
        left: -1px;
        top: 50%;
        transform: translateY(-50%);
         z-index: 1;
    }
   .corner-border-only:hover {
          color: red; /*Button font color on hover*/
   }

To implement it, please just add corner-border-only on the class field of a button element. Then wrap the button text with span tag like this: <span>French Oak<br>Collection</span>

See this: https://screencast-o-matic.com/watch/cbiibslD4u