Possible to Design This Button with Angled Corners Using Only CSS and No Images

Question

I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.

So, I'd like to come up with a universal way to code this button with just CSS and no images.

Thanks!

Here is a demo of the button →

Here is the HTML I have in my demo:

<div id="banner">
  <div id="button-box">
    <a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
  </div>
</div>

And the CSS:

#banner {
  background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 200px;
  text-align: center;
}

#button-box {
  padding: 50px 0;
}

/* Button */
.btn-cornered {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  display: inline-block;
  line-height: 53px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  border: 1px solid #fff;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  text-decoration: none;
}
.btn-cornered:before {
    position: absolute;
    left: -1px;
    bottom: -1px;
    content: "";
    border-bottom: 11px solid #fff;
    border-right: 11px solid transparent;
}
.btn-cornered:after {
    position: absolute;
    left: -2px;
    bottom: -2px;
    content: "";
    border-bottom: 11px solid;
    border-right: 11px solid transparent;
}

.btn-cornered span {
    top: -2px;
    left: -1px;
    position: relative;
    padding-right: 20px;
    display: block;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.btn-cornered span:before {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid #fff;
}
.btn-cornered span:after {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid;
}


/* Dark Background Styles */
.btn-cornered-dark-bg {
    height: 53px;
}
.btn-cornered-dark-bg:after {
    border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
    max-width: none;
    line-height: 58px;
    font-size: 24px;
    height: 53px;
    width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
    right: 1px;
    top: 1px;
}
.btn-cornered-dark-bg span:after {
    border-right-color: #000;
    right: 0px;
    top: 0px;
}

Answer 1

Thanks everyone for your solutions and suggestions. For what it's worth, this is the solution I came up.

CSS:

.abutton {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    text-align: center;
    line-height: 1;
    font-size: 24px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
  }
  .abutton:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 8px;
    left: 0;
    border-left: 1px solid #ffffff;
  }
  .abutton:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 0;
    left: 15px;
    border-right: 1px solid #ffffff;
  }
  .abutton span {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  .abutton span:before,.abutton span:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
  }
  .abutton span:before {
    left: 8px;
    bottom: 0;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
  .abutton span:after {
    top: 0;
    right: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
  footer .abutton {
    font-size: 21px;
  }
  .abutton:hover {
    color: #666;
  }
  .abutton:hover span:before,.abutton:hover span:after {
    background-color: #fff;
  }
  #button-frame { 
    background: #666;
    min-height: 200px;
    padding: 20px; 
  }

HTML:

<div id="button-frame">
  <a class="abutton" href="#"><span></span>Learn More</a>
</div>

Answer 2

Clip-path solution

It is done by pseudo element after which is clipped using css3 clip-path to desired shape. However, clip-path is not supported by IE and Edge (Can I use). It can be little tricky to change values in clip-path to get desired width of border and length of "cutted triangle" so I create little script for that - Codepen

a {
  position: relative;
  padding: 8px 20px;
}

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
  clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}

<a href="#">Text Here</a>

Demo - JS Bin

Answer 3

Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.

I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: steelblue;
}

button {
  background: transparent;
  padding: 10px 20px;
  position: relative;
  border: none;
  margin: 20px;
  overflow: hidden;
  color: white;
}

button::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
  right: 15px;

  content: '';
  border-left: 1px solid white;
  border-top: 1px solid white;
}

button::after {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 15px;
  left: 15px;
  
  content: '';
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

button span {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: 15px;
  border: 1px solid white;
  transform: skew(45deg);
  transform-origin: bottom left;
}

<button>
  <span></span>
  Sign up &amp; Stay Connected
</button>