<div class="pagelink">
<a href="#" class="btn">Click Click Click</a>

 </div>
// reset & normalize
* {
  text-decoration: none;
}

html {
  font-size: 62.5%; // 62.5% = 1rem = 10px
  padding: 3rem;
  color: #614f38;
}

body {
  font-size: 1.6rem;
}

// Start!
.pagelink{
  text-align:center;
}
a.btn {
  position: relative;
  display: inline-block;
  margin:0 5px;
  border-bottom: 2px solid;
  padding: .5rem 2.6rem .5rem .5rem;
  transition: all .3s;
  color: #614f38;
  &:before ,&:after{
        content: '';
    position: absolute;
    transition: all .3s;
  }
  &:before {

    right: 5px;
    bottom: 40%;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: rotate(45deg);
    

  }
  &:after{
    opacity:0;
    bottom:0;
    left:0;
    height:20%;
    width:0;
    background:rgba(#ffdd44,.7);
  }

  &:hover {
    letter-spacing:2px;
    &:before {
      right:5px;
    }
    &:after{
      opacity:1;
      width:100%;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.