Hover, click & hold

button

by Denis Tverdokhlebov

HTML

<button class="btn">Hover, click & hold</button>

SCSS

$gradient-start: #D38312;
$gradient-end: #A83279;
body {
   text-align: center;
   margin: 7rem auto;
   background: #222;
}

.btn {
   /* reset */
   -webkit-appearance: none;
   border: 0;
   outline: 0;
   /* styles */
   position: relative;
   background: linear-gradient(45deg, $gradient-start 10%, $gradient-end 90%);
   background-size: 200% 100%;
   padding: 1.5rem 2rem;
   color: white;
   border-radius: 100px;
   font-size: 1.3rem;
   font-family: "Source Code Pro";
   transition: .3s;
   
   &:hover {
      animation: bruh 3s linear infinite;
   }
   
   &:active {
      animation: nope 1s ease-in-out infinite;
   }
}

@keyframes bruh {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes nope {
   0% {
        transform: scale(1.1) rotate(5deg);
    }

    50% {
        transform: scale(0.9) rotate(-5deg);
    }

    100% {
        transform: scale(1.1) rotate(5deg);
    }
}

a {
   display: table;
   margin: 25px auto;
   text-decoration: none;
   color: lighten(#222, 10%);
   font-family: "Source Code Pro";
   transition: .3s;

   &:hover {
      color: white;
   }
}