.gradient-button {
    position: relative;
    padding: 12px 30px;
    border-radius: 12px;
    background: black; /* inner button color */
    color: white;
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    transition: transform 0.3s ease;
  }
  
  /* Animated gradient border using pseudo-element */
  .gradient-button::before {
    content: "";
    position: absolute;
    top: -2px; 
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(270deg, #ff3cac, #784ba0, #4b6cb7);
    background-size: 200% 200%;
    border-radius: 14px; /* slightly bigger than button */
    z-index: -1;
    animation: gradientBorder 3s ease infinite;
  }
  
  /* Optional hover scale */
  .gradient-button:hover {
    transform: scale(1.05);
  }
  
  /* Keyframes for gradient animation */
  @keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .animated-border-btn {
    position: relative;
    padding: 12px 30px;
    border-radius: 12px;
    background: transparent; /* button is transparent */
    color: white;
    font-weight: bold;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    border: 2px solid transparent;
    transition: color 0.3s ease;
  }
  
  /* Border animation using pseudo-element */
  .animated-border-btn::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: linear-gradient(270deg, #ff3cac, #784ba0, #4b6cb7, #ff3cac);
    background-size: 400% 400%;
    z-index: -1;
    animation: borderMove 3s linear infinite;
  }
  
  /* Inner button overlay to make inside transparent */
  .animated-border-btn::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: black; /* button inner color */
    border-radius: 10px;
    z-index: -1;
  }
  
  /* Keyframes for border animation */
  @keyframes borderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Optional hover effect */
  .animated-border-btn:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }