Buttons

by Jasper Stevens

HTML

<button class="cut-corner" type="submit">This is a button</button>
<br>
<br>
<button class="cut-corner bordered" type="submit">This is a button</button>

CSS

.cut-corner {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  background-color: transparent;
  border-radius: 3px;
  padding: 20px 50px 20px 30px;
  font-size: 17px;
  border: 0;
  background-image:
    linear-gradient(#971318, #971318),
    linear-gradient(#D41317, #D41317),
    linear-gradient(to right, #971318, #D41317),
    linear-gradient(to right, #971318, #D41317),
    linear-gradient(to top left, transparent calc(50% - 1px), #D41317 calc(50% - 1px), #D41317 calc(50% + 1px), #D41317 calc(50% + 1px)), 
    linear-gradient(to right, #971318, #D41317),
    linear-gradient(#D41317, #D41317);
  background-size: 2px 100%, 2px calc(100% - 25px), calc(100% + 25px) 2px, calc(100% - 25px) 2px, 25px 25px, 100% 100%, 100% calc(100% - 25px);
  background-position: 0% 0%, 100% 0, -25px 0%, 0px 100%, 100% 100%, -25px 0%, 0% 0;
  background-repeat: no-repeat;
}


.bordered {
    color: #222;
  background-image:
    linear-gradient(#9DA1A3, #9DA1A3),
    linear-gradient(#9DA1A3, #9DA1A3),
    linear-gradient(#9DA1A3, #9DA1A3),
    linear-gradient(#9DA1A3, #9DA1A3),
    linear-gradient(to top left, transparent calc(50% - 1px), #9DA1A3 calc(50% - 1px), #9DA1A3 calc(50% + 1px), #fff calc(50% + 1px)), 
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size: 2px 100%, 2px calc(100% - 25px), calc(100% + 25px) 2px, calc(100% - 25px) 2px, 25px 25px, 100% 100%, 100% calc(100% - 25px);
  background-position: 0% 0%, 100% 0, -25px 0%, 0px 100%, 100% 100%, -25px 0%, 0% 0;
}

/* Just for demo */

*{
  box-sizing: border-box;
  }
body{
 background: #ddd;
}