Button Gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Button Gradient</title>
</head>
<body class="centrado">

    <button class="btn-hover button"> Button Gradient </button>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>
.centrado {
    height: 100vh;
    background:#1F2430;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-hover {
    padding: 10px;
    border: none;
    width: 170px;
    border-radius: 0.5rem;
    cursor: pointer;
    color: #fff;
    background-size: 300% 100%;
    transition: all 0.4s ease-in-out;
  }

  .btn-hover.button {
    box-shadow: 0 4px 20px 0 rgba(45, 116, 199, 0.50);
    background-image: linear-gradient(to right, #be619c,  #766ab1, #766ab1, #be619c);
  }

  .btn-hover:hover {
    background-position: 100% 0;  
  }

También puedes descargarlo en: https://github.com/NeisserMS/Instagram-/tree/master/Button-Gradient

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *