* {
  font-family: "Roboto", sans-serif;
}

.btn__container {
  
  display: flex;
  justify-content: center;
  align-items: center;
}
 .btn {
    min-width: 20px;
    background-color: #fff;
    padding: 1rem 1rem;
    text-decoration: none;
    color: #0077B5;
    display: flex;
    transition: all .2s ease-in-out;
   margin-right: 10px;
   border-radius: 50px;
   
    i {
      color: #0077B5;
      font-size: 20px;
      padding: 0px 2px 0px;
      transition: all .3s ease-in-out;
    }
    span {
      font-family: "Roboto", sans-serif;
      align-self: center;
      transform: translateX(0px);
      transition: all .1s ease-in-out;
      opacity: 1;
     }
   
   &:hover {
    transform: scale(1);
     background-color: #0077B5;
    /* background: linear-gradient(to right, #fff -15%,#0077B5 33%,#0077B5 70%,#fff 115%); */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.10);
      i {
        transform: translateX(0px);
        color: #FFF;
        padding: 0px 2px 0px;
      }
      span {
        transform: translateX(30px);
        opacity: 0;
      }
    }
   &:active {
     transform: scale(1);
     box-shadow: 0px 2px 10px rgba(0,0,0,0.10);
   }
}

.btn-f {
    min-width: 10px;
    background-color: #fff;
    padding: 1em 1em;
    text-decoration: none;
    color: #286ED6;
    display: flex;
    transition: all .2s ease-in-out;
  margin-right: 10px;
   border-radius: 50px;
  
    i {
      color: #286ED6;
      font-size: 20px;
      padding: 0px 2px 0px;
      transition: all .3s ease-in-out;
    }
    span {
      font-family: "Roboto", sans-serif;
      align-self: center;
      transform: translateX(0px);
      transition: all .1s ease-in-out;
      opacity: 1;
     }
   
   &:hover {
    transform: scale(1);
     background-color: #286ED6;
    /* background: linear-gradient(to right, #fff -15%,#286ED6 50%,#286ED6 51%,#fff 115%); */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.10);
      i {
        transform: translateX(0px);
        padding: 0;
        color: #FFF;
        padding: 0px 2px 0px;
      }
      span {
        transform: translateX(30px);
        opacity: 0;
      }
    }
   &:active {
     transform: scale(1);
     box-shadow: 0px 2px 10px rgba(0,0,0,0.10);
   }
}

.btn-x {
    min-width: 20px;
    background-color: #fff;
    padding: 1rem 1rem;
    text-decoration: none;
    color: #000;
    display: flex;
    transition: all .2s ease-in-out;
  margin-right: 10px;
   border-radius: 50px;
  
    i {
      color: #000;
      font-size: 20px;
      padding: 0 2px 0;
      transition: all .3s ease-in-out;
    }
    span {
      font-family: "Roboto", sans-serif;
      align-self: center;
      transform: translateX(0px);
      transition: all .1s ease-in-out;
      opacity: 1;
     }
   
   &:hover {
    transform: scale(1);
    background-color: #000;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.10);
      i {
        transform: translateX(0px);
        padding: 0 2px 0;
        color: #FFF;
      }
      span {
        transform: translateX(30px);
        opacity: 0;
      }
    }
   &:active {
     transform: scale(1);
     box-shadow: 0px 2px 10px rgba(0,0,0,0.10);
   }
}

.btn-w {
    min-width: 0px;
    background-color: #fff;
    padding: 1rem 1rem;
    text-decoration: none;
    color: #25D366;
    display: flex;
    transition: all .2s ease-in-out;
   border-radius: 50px;
  
    i {
      color: #25D366;
      font-size: 20px;
      padding: 0 2px 0;
      transition: all .3s ease-in-out;
    }
    span {
      font-family: "Roboto", sans-serif;
      align-self: center;
      transform: translateX(0px);
      transition: all .1s ease-in-out;
      opacity: 1;
     }
   
   &:hover {
    transform: scale(1);
    background-color: #25D366;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.10);
      i {
        transform: translateX(0px);
        padding: 0 2px 0;
        color: #FFF;
      }
      span {
        transform: translateX(30px);
        opacity: 0;
      }
    }
   &:active {
     transform: scale(1);
     box-shadow: 0px 2px 10px rgba(0,0,0,0.10);
   }
}