/* From Uiverse.io by adamgiebl */
button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
    font-weight: 400;
    font-size: 17px;
    padding: 0.3em 1.5em 0.4em 0.6em;
    color: white;
    background: #ad5389;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#0f0c29),
      color-stop(#302b63),
      to(#24243e)
    );
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
    border: none;
    letter-spacing: 0.05em;
    border-radius: 16px;
  }

  button svg {
    margin-right: 3px;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
      -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  }

  button span {
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
      -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  }

  button:hover svg {
    -webkit-transform: translateX(5px) rotate(90deg);
    -ms-transform: translateX(5px) rotate(90deg);
    transform: translateX(5px) rotate(90deg);
  }

  button:hover span {
    -webkit-transform: translateX(7px);
    -ms-transform: translateX(7px);
    transform: translateX(7px);
  }