BUTTON WITH ARROW

by davidxmartins

HTML

<div class="center">

  <button class="send-button btn-reverse btn-arrow">
    <span>
      Hover me
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.7 21.36">
  <line class="send-arrow_body" x1="19.15" y1="10.68" x2="1.25" y2="10.68"/>
  <polyline class="send-arrow_head" points="11.02 1.13 20.58 10.68 11.02 20.23"/>
</svg>
</span>
</button>

</div>

CSS

/* 1. Global Reset (Already standard CSS) */
* {
  box-sizing: border-box;
}

/* 2. Centering Utility (Already standard CSS) */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


button.send-button {
  background: #1d1d1d; /* @black resolved */
  border: none;
  font-size: 1rem;
  color: white;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1.4rem 2.1rem;
  display: inline-block;
  cursor: pointer;
  width: 200px;
  outline: none;
  vertical-align: middle;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease, background 0.25s ease;
}

button:hover {
  background: #9b9b9b;
  color: #000000;
}

.btn-arrow {
  position: relative;
  transition: background-color 300ms ease-out;
}

.btn-arrow span { 
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.btn-arrow:hover span {
  transform: translateX(-1rem);
}

.btn-arrow svg {
  position: absolute;
  width: 1.1em;
  right: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn-arrow:hover svg {
  opacity: 1;
  right: -2rem;
}

/* send arrow styles */
      .send-arrow_head, .send-arrow_body {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .send-arrow_head {
        stroke-width: 2.25px;
      }
      .send-arrow_body {
        stroke-width: 2.5px;
      }