chevron-left chevron-right

Piotr Nalepa Frontend, architecture and AI

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

This version
blog.piotrnalepa.pl/2013/02/05/css-jak-zrobic-animowany-przycisk-za-pomoca-css
Published
Author
, Staff Software Engineer
Category
CSS
Feedback
Write to me · Post on X

This post is 13 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.

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.

Section 1Animowany przycisk - struktura kodu HTML

Example 1HTML
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.

Section 2Animowany 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:

Example 2CSS
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.

Section 3Animowane 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

Share

LinkedIn X Bluesky

Feedback

Write to me Post on X

About the author

Staff Software Engineer

I've been writing this blog since 2009 and building for the web professionally for 14 years. Today I lead the frontend of the Cosmos platform at Bishop Fox, where I've been since day one of the project. Before that I worked at OLX, KUDO, Auto1 and eZ Systems. Here I write about what I've learned in practice: JavaScript, TypeScript, React, CSS and frontend architecture. I've also spoken at conferences across Poland and Europe. Got a question or an idea for a post? Let me know!

Related posts

  1. CSS Grid – ficzer który uwalnia kreatywność w tworzeniu layoutów CSS ·
  2. [CSS] Wizualizacja ekranu meczowego Premier League za pomocą HTML i CSS CSS ·
  3. [CSS] Kilka sposobów na ożywienie interfejsu użytkownika za pomocą animacji CSS CSS ·