Animowane gradientowe button’y CSS

W internecie powstaje wiele wspaniałych rzeczy, także tych związanych ze światem frontendu. Dokładam swoją cegiełkę i przedstawiam kilkanaście animowanych gradientowych button’ów.

Animowany button

Istnieje mnóstwo animowanych button’ów z bardzo różnymi efektami. Starałem się zrobić coś nowego (chociaż to bardzo trudne). Stworzyłem button’y, w których animacja istnieje podczas zwykłego stanu, jak i również po najechaniu.

Demo

Kod

SCSS

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700');
.button-one {
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 }
 .button-two {
   background: linear-gradient(-45deg, #00F260, #0575E6);
 }
 .button-three {
   background: linear-gradient(-45deg, #000046, #1CB5E0);
 }
 .button-four {
   background: linear-gradient(-45deg, #833ab4, #fd1d1d, #fcb045);
 }
 .button-five {
   background: linear-gradient(-45deg, #DA4453, #89216B);
 }
 .button-six {
   background: linear-gradient(-45deg, #16BFFD, #CB3066);
 }
 .btn {
   font-family: 'Poppins';
   font-weight: 400;
   letter-spacing: 0.5px;
   transition: all 0.3s ease;
   cursor: pointer;
   border-radius: 6px;
   background-size: 400% 400%;
   color: #FFF;
   text-transform: uppercase;
   border: 0;
   padding: 13px 30px;
   font-size: 15px;
   animation: Gradient 10s ease infinite;
 &:hover {
     background-size: 150% 150%;
   }
 }
 .button-outline {
   animation: Gradient 10s ease infinite;
   position: relative;
 span {
     position: relative;
     z-index: 2;
   }
 &::after {
     content:'';
     position: absolute;
     border-radius: 4px;
     z-index: 0;
     background: #333;
     top: 2px;
     bottom: 2px;
     right: 2px;
     left: 2px;
     width: calc(100% - 4px);
     height: calc(100% - 4px);
   }
 }
 @keyframes Gradient {
     0% {
         background-position: 0% 50%
     }
     50% {
         background-position: 100% 50%
     }
     100% {
         background-position: 0% 50%
     }
 }

HTML

<button class="btn button-gradient buttone-one">Click here!</button>
<button class="btn button-outline buttone-one">Click here!</button>

Więcej HTML'a na codepen.

Jak powstały?

Wersje z tłem to najprostsze button’y z background: linear-gradient(). Możemy ustawiać wiele kolorów, edycja i wstawienie własnych kolorów jest banalnie prosta. Animacja polega na przesuwaniu pozycji tła poprzez właściwość background-position.

Wersja outline pod względem implementacji jak wersja z tłem. Różnicą jest ustawianie tła dla przycisku poprzez pseudoelement. Minusem tego rozwiązania jest konieczność ustawiania tła dla button’ów, tak aby pokrywało się z tłem danej sekcji.
Uzyskanie animowanych obramowań button’u nie jest najprostsze. Istnieje wiele sposobów, lecz z różnym efektem. Najbliżej najlepszego efektu jest clip-path.
Przedstawione w demo rozwiązanie jest kolejną opcją. Pod względem wydajnościowym oraz wsparcia przeglądarek jest bardzo dobrze.

Z podanego kodu można korzystać bez ograniczeń.