Button Slider CSS

Para empezar, necesitarás un botón o un elemento de navegación configurado. Aplique el siguiente código HTML en el lugar donde desea mostrar este botón.

<a href="#" class="btn-slide">
          <span class="circle">
            <i class="material-icons" style="position: absolute; left: 8px; top: 8px; ">content_paste</i>
          </span>
          <span class="title">Click hover</span>
          <span class="title-hover">Hello word!</span>
        </a>

Una vez que tenga el botón en su lugar, es hora de configurar el CSS. Coloque el siguiente código CSS dentro de la etiqueta de estilo de su plantilla.

#wrap {
      margin: 20px auto;
      text-align: center;
    }

    .btn-slide {
      position: relative;
      display: inline-block;
      height: 50px;
      width: 200px;
      line-height: 50px;
      padding: 0;
      border-radius: 50px;
      background: #fdfdfd;
      border: 2px solid #ee192d;
      margin: 0px;
      transition: .5s;
    }

    .btn-slide:hover {
      background-color: #ee192d;
    }
    .btn-slide:hover span.circle  {
      left: 100%;
      margin-left: -45px;
      background-color: #fdfdfd;
      color: #ee192d;
      transform: rotate(-360deg);
      /**/
    }
    .btn-slide:hover span.title {
      left: 40px;
      opacity: 0;

    }

    .btn-slide:hover span.title-hover  {
      opacity: 1;
      left: 40px;
    }

    .btn-slide span.circle  {
      display: block;
      background-color: #ee192d;
      color: #fff;
      position: absolute;
      float: left;
      margin: 5px;
      line-height: 42px;
      height: 40px;
      width: 40px;
      top: 0;
      left: 0;
      transition: .5s;
      border-radius: 50%;
    }

    .btn-slide span.title, .btn-slide span.title-hover  {
      position: absolute;
      left: 70px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      font-weight: bold;
      color: #ee192d;
      transition: .5s;
    }


    .btn-slide span.title-hover {
      left: 80px;
      opacity: 0;
      color: #fff;
    }

    a{
      box-sizing: unset;
    }