section.centered-container
  a(class="link link--arrowed", href="#")
    |Ceci est un magnifique bouton
    svg(class="arrow-icon", xmlns="http://www.w3.org/2000/svg", width="32", height="32", viewBox="0 0 32 32")
      g(fill="none", stroke="#2175FF", stroke-width="1.5", stroke-linejoin="round", stroke-miterlimit="10")
        circle(class="arrow-icon--circle", cx="16", cy="16", r="15.12")
        path(class="arrow-icon--arrow", d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98")

$white:          #FFFFFF;
$black:          #000000;
$whitesmoke:     #F5F5F5;
$link-blue:      #2175FF;

html, body {
  background-color: $whitesmoke;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-container {
  background-color: $white;
  display: inline-flex;
  padding: 4rem;
  border-radius: .125rem;
  border: 1px solid rgba($black, .1);
  box-shadow: 0 .125rem .25rem rgba($black, .04);
}

.link {
  color: $link-blue;
    cursor: pointer;
    font-weight: 400;
  text-decoration: none;
}

.link--arrowed {
  display: inline-block;
    height: 2rem;
    line-height: 2rem;
  
  .arrow-icon {
    position: relative;
    top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
  }
  
  .arrow-icon--circle {
    transition: stroke-dashoffset .3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
  }
  
  &:hover {
    .arrow-icon {
      transform: translate3d(5px, 0, 0);
    }
    
    .arrow-icon--circle {
      stroke-dashoffset: 0;
    }
  }
}