<div class="wrapper">
  <a href="" class="link">ボタン</a>
</div>
.wrapper{
  background: #e7e7e7;
  padding: 3rem;
  width: 15rem;
  margin: 0 auto;
  .link{
    display: block;
    background: salmon;
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: background .3s;
    &:hover{
      background: lightsalmon;
    }
    &::before{
      content: "";
      width: 6rem;
      height: 2rem;
      background: skyblue;
      position: absolute;
      left: -1rem;
      top: -1.2rem;
      border-radius: 3rem;
      pointer-events: none;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.