.button {
      cursor: pointer;
      min-width: 64px;
      padding: 8px 30px;
      box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
      border-width: 0px;
      border-radius: 5px;
      white-space: nowrap;
      font-weight: 600;
      transition-duration: 0.4s;
      text-decoration: none;
      overflow: hidden;
      background-color: #0d6efd;
      color: snow;
    }

    .outline {
      color: #0d6efd;
      background-color: #fff;
      border-color: currentColor;
    }

    .solid {
      color: white;
      background-color: blue;
      border: 0px;
    }

    /* Animation  with span on hover*/

    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }

    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -10px;
      transition: 0.5s;
    }

    .button:hover span {
      padding-right: 10px;
    }

    .button:hover span:after {
      opacity: 1;
      right: 0;
    }