search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Jak zrobić animowany przycisk za pomocą CSS?

[CSS] Jak zrobić animowany przycisk za pomocą CSS?

Czym byłyby nowoczesne multimedia bez animacji? Na pewno, nie byłyby atrakcyjne dla przeciętnego użytkownika. Przeciętny użytkownik multimediów lubi oglądać różne efekty. Również, efekty na stronach WWW, które sprawiają że korzystanie ze stron jest o wiele przyjemniejsze.

Jednym z takich efektów są animowane przyciski, które reagują zależnie od akcji wykonanej przez użytkownika strony.
W dzisiejszym wpisie pokażę jak stworzyć przyjemny w użytkowaniu animowany przycisk tylko i wyłącznie za pomocą CSS.

Animowany przycisk - struktura kodu HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="buttons">
    <a title="" href="" class="button left">
        <i class="icon-star">&nbsp;</i>
        Przycisk 1
    </a>
    <a title="" href="" class="button middle">
        <span class="icon-chevron-left">&nbsp;</span>
        <span class="label">Przycisk 2</span>
    </a>
    <a title="" href="" class="button right">
        <span class="label">Przycisk 3</span>
        <span class="icon-chevron-right">&nbsp;</span>
    </a>
</div>

Jak widać, w kodzie powyżej zostały umieszczone 3 znaczniki linków jeden po drugim. Wszystkie z nich mają klasę button i znajdują się w kontenerze o klasie buttons.

Animowany przycisk - magia kodu CSS

Aby osiągnąć efekt animacji przycisków, wykorzystamy możliwości CSS3, a w szczególności animacji wykonywanych przez przesunięcie: transistion, która przyjmuje 4 parametry:

  • własność animowaną (np. height lub all, czyli wszystkie własności),
  • czas trwania animacji w sekundach,
  • typ animacji (np. linear lub ease-out),
  • opóźnienie (pominięte w tym przykładzie).

Kod CSS, który odpowiedzialny za nadanie wyglądu i animacji dla wcześniej przygotowanej struktury HTML wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.buttons {
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%);
    height: 30px;
    border: 1px solid #000;
    position: relative;
    border-radius: 5px;
    box-shadow: inset 0 0 2px rgba(255,255, 255, 0.1);
    text-align: center;
    overflow: auto;
    float: right;
    *max-width: 250px;
}
.buttons,
.buttons a {
    color: #fff;
    font-weight: bold;
    line-height: 30px;
    display: block;
    text-decoration: none;
}
.buttons .button {
    display: block;
    float: left;
    position: relative;
    height: 30px;
}
.buttons .button span {
    height: 30px;
    display: block;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.buttons .button .label {
    padding: 0 10px;
}
.buttons .button:hover .label,
.buttons .button:focus .label,
.buttons .button:active .label {
    text-decoration: none;
}
.buttons .button:hover,
.buttons .button:focus,
.buttons .button:active {
    background: linear-gradient(to bottom, #999999 0%, #292929 100%);
    background-clip: padding-box;
}
.button [class^="icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("img/glyphicons-halflings-white.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}
.button .icon-star {
  background-position: -120px 0;
}
.button .icon-chevron-left {
  background-position: -432px -72px;
}
.button .icon-chevron-right {
  background-position: -456px -72px;
}
.buttons .left {
    padding: 0 10px;
    display: block;
    border-right: 1px solid #000;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.buttons .middle [class^="icon-"],
.buttons .right [class^="icon-"] {
    height: 16px;
    margin: 7px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.buttons .middle {
    overflow: hidden;
    float: left;
    max-width: 28px;
    transition: all 0.5s linear;
}
.buttons .middle:hover {
    max-width: 300px;
}
.buttons .middle .label {
    max-width: 0;
    display: none;
    transition: all 0.5s linear;
}
.buttons .middle:hover .label {
    max-width: 200px;
    display: block;
    padding: 0 10px;
}
.buttons .right {
    overflow: hidden;
    float: right;
    max-width: 300px;
    border-left: 1px solid #000;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.buttons .right [class^="icon-"] {
    float: right;
}
.buttons .right .label {
    max-width: 200px;
}

W powyższym kodzie CSS zostały wykorzystane elementy Twitter Bootstrap (ikony). Animacje zostały dodany do przycisku środkowego oraz do jego etykiety (span z klasą label). Ich celem jest animowanie własności, które zostały zmienione podczas najazdu na środkowy przycisk (stan hover), czyli między innymi szerokość i padding. Wszystkie te własności mają animację liniową (czyli bez przyspieszeń i zwolnień).

W kodzie powyżej, celowo pominąłem własności CSS z rozpoczynające się odpowiednimi prefiksami, które umożliwiają działanie kodu w innych przeglądarkach, np. Operze.
Przeglądarki, które nie wspierają efektów CSS-owych animacji, będą pokazywać zwykłe pojawienie się tekstu w środkowym przycisku.

Animowane przyciski - podsumowanie

Jak widać, animacje uzyskiwane za pomocą CSS są bardzo łatwe do wykorzystania. Należy również dodać, że są one również o wiele mniej zasobożerne niż animacje uzyskiwane za pomocą JS i przede wszystkim o wiele bardziej płynne.

Animowanie przycisków sprawia, że strona zaczyna ożywać. Interakcja użytkownika z interfejsem wydaje się być wtedy ciekawsza i bardziej wciągająca. Należy jednak też pamiętać, że co za dużo to nie zdrowo, tak jak ze wszystkim, i bardzo wskazany jest zdrowy rozsądek.

Przeglądarkawsparcie
Mozilla Firefoxtak
Google Chrometak
Operatak
Safaritak
Internet Explorer

<10/10

nie/tak

Animowane przyciski będą działały we wszystkich nowoczesnych przeglądarkach. Niestety, dla Internet Explorera 9 (i niżej) efekt animacji nie zostanie uzyskany.

Demo z tego artykułu można zobaczyć tutaj: animowany przycisk z wykorzystaniem CSS

  • Comandeer

    Przyciski wyglądają bardzo ładnie i działa to jak należy, ale 😉
    Ostatnio mnie tak wzięło na drobne przemyślenie z zakresu usability/accessibility. Właśnie odnośnie przycisków, toteż odważyłem się skomentować 🙂
    Tak naprawdę w języku HTML istnieją dwa klikalne elementy – hiperłącza i przyciski. Hiperłącza służą do przechodzenia do innych podstron (czyli muszą mieć href będący poprawnym URI), natomiast przyciski służą do wykonania jakiejś akcji (są skryptowane).
    Czyli jeśli chcemy mieć przycisk odpalający fajerwerki, walimy button. Owszem, można na przykład ostylować sobie span, walnąć mu role=”button” i tyle, ale wówczas nie będzie focusowalny z klawiatury (a tabindex po prostu cuchnie). Jeśli natomiast przycisk równoznaczny jest z przejściem na daną podstronę, to jest linkiem.
    Suma sumarum – tutaj przyciski mają wykonywać pewną akcję niźli przechodzić do podstrony, zatem widziałbym tutaj raczej ostylowany button niźli a?
    Tak, wiem, czepiam się. Ale takie wydawałoby się głupoty nie dają mi spać po nocach i naprawdę zamieniłem w swym kodzie span z clickiem na odpowiedni button 😉

  • Według mnie wyszedł z tego ładny efekt. Z pewnością kiedyś się przyda.

    PS: Comandeer: zamiast zasanawiać się na takimi rzeczami lepiej idź na wykład z filozofii 🙂

  • konrados

    Bardzo ciekawy efekt. Lecz mam pewien problem. Chciałbym aby przycisk rozszerzał się w poziomie a nie w pionie. Czy jest możliwość aby autor posta mi pomógł?

  • wystarczy dla stanów :hover ustawiać nie max-width, a max-height. W ten sposób nastąpi animacja wysokości.