.buttons {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      /*   padding: 2em 0em; */
  }
  
  .btn-container {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      background-color: #FFF;
      padding: 40px 0px;
      width: 120px;
      height: 50px
  }
  
  h1 {}
  
  p {}
  
  .logbtn {
      letter-spacing: 0.1em;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      max-width: 140px;
      position: relative;
      text-decoration: none;
      text-transform: uppercase;
      width: 100%;
  }
  
  .logbtn:hover {
      text-decoration: none;
      filter: drop-shadow(1px 0px 0px gray);
  }
  /*btn_background*/
  
  .effect01 {
      color: #FFF;
      box-shadow: 0px 0px 0px 1px #000 inset;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      transition: all 0.3s ease-in-out;
  }
  
  .effect01:hover {
      background-color: #9e9e9e54;
      color: black;
  }
  /*btn_text*/
  
  .effect01 span {
      transition: all 0.2s ease-out;
      z-index: 2;
      color: #000;
      font-style: normal;
      margin-bottom: 10px;
  }
  
  .effect01:hover span {
      color: #000;
      font-style: normal;
  }
  /*highlight*/
  
  .effect01:after {
      background: #FFF;
      border: 0px solid #000;
      content: "";
      height: 155px;
      left: -75px;
      opacity: .8;
      position: absolute;
      top: -50px;
      -webkit-transform: rotate(35deg);
      transform: rotate(35deg);
      width: 50px;
      transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
      /*easeOutCirc*/
      z-index: 1;
  }
  
  .effect01:hover:after {
      background: #FFF;
      border: 20px solid #000;
      opacity: 0;
      left: 120%;
      -webkit-transform: rotate(40deg);
      transform: rotate(40deg);
  }