div.content
  a.button.
     Hover Me :D

:root {
  
  --white: #ffffff;
  --gray: #1f1e1e;
  --orange: #f8a488;
}

.content {
  
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray);
}

.button {
  
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  padding: 1rem;
  position: relative;
  cursor: pointer;
  color: var(--white);
  z-index: 1;
  
  &:after {
        
    content: '';
    background: var(--orange);
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: circle(0% at 50% 50%);
    transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 0.8s;
    z-index: -1;
  }
    
  &:hover {
      
    &:after {

      clip-path: circle(100% at 50% 50%);
      transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 2s;
    }
  }
}