Exore LTD » CSS3 » Анимированные кнопки с пузырьками на CSS3
Лого SiteHere.ru

Июль 3, 2014 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Анимированные кнопки с пузырьками на CSS3

Анимированные кнопки с пузырьками на CSS3

Сегодня мы создадим анимиронную кнопку на CSS3. С помощью этого метода вы любую ссылку на странице сможете превратить в анимированную кнопку. Мы не будем использовать Javascript, что очень важно.

Пример кнопок можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Для начала создадим наши кнопки в HTML. И присвоим им соответствующие классы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="buttonContainer">
    <a href="#" class="button big blue">Большая кнопка</a>
    <a href="#" class="button big green">Большая кнопка</a>
    <a href="#" class="button big orange">Большая кнопка</a>
    <a href="#" class="button big gray">Большая кнопка</a>
 
    <a href="#" class="button blue medium">Средняя кнопка</a>
    <a href="#" class="button green medium">Средняя кнопка</a>
    <a href="#" class="button orange medium">Средняя кнопка</a>
    <a href="#" class="button gray medium">Средняя кнопка</a>
 
    <a href="#" class="button small blue">Маленькая кнопка</a>
    <a href="#" class="button small green">Маленькая кнопка</a>
    <a href="#" class="button small blue rounded">Маленькая кнопка</a>
 
    <a href="#" class="button small orange">Маленькая кнопка</a>
    <a href="#" class="button small gray">Маленькая кнопка</a>  
    <a href="#" class="button small green rounded">Закругленная</a>
</div>


CSS часть

Весь код с анимацией кнопок находится в файле buttons.css. Это сделано для удобства, в случае если вы сразу захотите применить данный эффект, необходимо лишь подключить этот файл к вашему проекту и прописать стили. Код данного файла следующий:

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

.button {
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
    text-decoration:none !important;
    white-space:nowrap;
    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-image:url('button_bg.png');
    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}
 
.button:hover {
    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}
 
.button:active {
    bottom:-1px;
}
 
.button .big { 
    font-size:30px;
}
 
.button .medium {
    font-size:18px;
}
 
.button .small { 
    font-size:13px;
}
 
.button .rounded {
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}
 
.blue .button {
    color:#0f4b6d !important;
    border:1px solid #84acc3 !important;
    background-color: #48b5f2;
    background-image: url('button_bg.png'), url('button_bg.png'),
                      -moz-radial-gradient( center bottom, circle,
                                            rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                      -moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('button_bg.png'), url('button_bg.png'),
                      -webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
                                        from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
 
.blue .button:hover {
    background-color:#63c7fe;
    background-image: url('button_bg.png'), url('button_bg.png'),
                      -moz-radial-gradient( center bottom, circle,
                                            rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                      -moz-linear-gradient(#63c7fe, #58bef7);			
    background-image: url('button_bg.png'), url('button_bg.png'),
                      -webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,
                                        from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
 
.green .button {
    color:#345903 !important;
    border:1px solid #96a37b !important;	
    background-color: #79be1e;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                           rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),
                      -moz-linear-gradient(#82cc27, #74b317);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
 
.green .button:hover {
    background-color: #89d228;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                           rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),
                      -moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
 
.orange .button {
    color:#693e0a !important;
    border:1px solid #bea280 !important;	
    background-color: #e38d27;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                           rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),
                      -moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
 
.orange .button:hover {
    background-color:#ec9732;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                           rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),
                      -moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
 
.gray .button {
    color:#525252 !important;
    border:1px solid #a5a5a5 !important;	
    background-color: #a9adb1;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                          rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),
                      -moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
 
.gray .button:hover {
    background-color:#b6bbc0;
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -moz-radial-gradient(center bottom, circle, 
                                           rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),
                      -moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('button_bg.png'), url('button_bg.png'), 
                      -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, 
                                       from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),
                      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}


Вывод

Ну разве не классный эффект?!Кнопки одназначно надо брать и применять на своём сайте :). Если цвета сайта не подходят, ее можно конечно же изменить.


Успехов!

Источник: tutorialzine.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *