Angled buttons

by shanejones

HTML

<a href="#" class="btn"><span>Link Text</span></a>

SCSS

body {
  padding: 3rem;
}

.btn {
  border: 1px solid black;
  padding: 0.5rem 1rem;
  position: relative;
  
  span {
    display: block;
  }
  
  &:after {
    border: 1px solid black;
    border-bottom: 0;
    border-left: 0;
    position: absolute;
    background-color: red;
    height: calc(100% - 2px);
    width: 50px;
  }
}