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ń.