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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *