chevron-left chevron-right

[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ądarka wsparcie
Mozilla Firefox tak
Google Chrome tak
Opera tak
Safari tak
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