Gradient Button Border with Hover Effect

button.html

.btn {
      position: relative;
      display: inline-block;
      padding: 18px 40px;
      font-size: 20px;
      font-weight: 700;
      color: #002e48;
      text-align: center;
      text-decoration: none;
      border-radius: 50px;
      cursor: pointer;
      overflow: hidden;
      z-index: 0;
    }

    /* Gradient border */
    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 2px; /* border thickness */
      border-radius: 50px;
      background: linear-gradient(180deg, #424242 11.34%, #393f6f 79.59%);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      z-index: 1;
    }

    /* Sliding background inside the button */
    .btn::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0%;
      background: #7684ff;
      z-index: 0;
      transition: height 0.4s ease;
      border-radius: 50px;
    }

    /* Text */
    .btn span {
      position: relative;
      z-index: 2;
      background: linear-gradient(180deg, #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: color 0.4s ease;
    }

    /* Hover effect */
    .btn:hover::after {
      height: 100%;
    }

    .btn:hover span {
      color: white;
      -webkit-text-fill-color: white;
      background: none;
    }
  </style>


  <a href="#" class="btn"><span>Contact Us</span></a>