/* From Uiverse.io by joe-watson-sbf */ 
/* https://uiverse.io/joe-watson-sbf/swift-husky-44 */
.btn {
    font-size: 17px;
    background: transparent;
    border: none;
    padding: 1em 1.5em;
    color: #ffedd3;
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
  }
  
  .btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 0;
    background-color: #00ffd5;
    transition: 0.5s ease;
  }
  
  .btn:hover {
    color: #1e1e2b;
    transition-delay: 0.5s;
  }
  
  .btn:hover::before {
    width: 100%;
  }
  
  .btn::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 100%;
    background-color: #00ffd5;
    transition: 0.4s ease;
    z-index: -1;
  }
  
  .btn:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }

  input[type="submit"] {
    font-size: 17px;
    background: transparent;
    border: none;
    padding: 1em 1.5em;
    color: #ffedd3;
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
  }

  input[type="submit"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 0;
    background-color: #00ffd5;
    transition: 0.5s ease;
  }

  input[type="submit"]:hover {
    color: #1e1e2b;
    transition-delay: 0.5s;
  }

  input[type="submit"]:hover::before {
    width: 100%;
  }

  input[type="submit"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 100%;
    background-color: #00ffd5;
    transition: 0.4s ease;
    z-index: -1;
  }

  input[type="submit"]:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }