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

В этой статье мы попробуем создать полезный набор анимированных кнопок, используя всю мощь CSS3. С этим набором вы сможете просто странсформировать любую ссылку на вашем сайте в анимированную кнопку, назначив ей всего лишь имя класса(ов). В JavaScript нет необходимости. В наборе реализовано четыре цветовых схемы и три типоразмера кнопок.

Пример       Скачать

---

HTML

Для того, чтобы сделать ссылку кнопкой, ей нужно назначить класс .button и один из поддерживаемых цветов. Смотрите пример ниже:
<a href="#" class="button blue big">Download</a>
<a href="#" class="button blue medium">Submit</a>
<a href="#" class="button small blue rounded">Submit</a>

Доступны четыре класса цветов : blue (голубой), green (зеленый), orange (оранжевый) и gray (серый). Остальные классы, как вы видите, не являются обязательными. Вы можете выбрать размер кнопки среди маленького, среднего и большого и можете сделать кнопку более скругленной. Имена классов подобраны таким образом, чтобы их легко было запоминать, но при этом могут возникнуть проблемы с совпадением имен классов на вашей странице.

Давайте теперь посмотрим на классы более подробно...

CSS

Весь CSS код находится в buttons.css. Просто привяжите этот файл к своему проекту и используйте нужные вам классы.
Обратите внимание, что в коде использованы свойства стилей, характерные для определенных браузеров. В этом нет ничего страшного, если браузер видит не знакомое ему свойство, он просто его пропускает.

buttons/buttons.css
.button{
font:15px Calibri, Arial, sans-serif;

/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;

display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;

background-repeat:no-repeat;

/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */

background-position:bottom left;
background-image:url('button_bg.png');

/* CSS3 background positioning property with multiple values. The background
images themselves are defined in the individual color classes */

background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;

/* Applying a default border radius of 8px */

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

/* A 1px highlight inside of the button */

-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;

/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */

-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
transition:background-position 1s;
}

.button:hover{

/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}

Первое, что нужно сделать — это определить класс кнопки. Основой кнопки является позиционирование, шрифт и стили заднего плана.
Сначала идут настройки шрифтов, потом отображение блока кнопки. Устанавливаем свойство ссылки inline-block, которое позволит ей быть и текстовым элементом и блочным.
Как вы видите, каждой кнопке можно назначить одно из четырех изображений на заднем плане, но при этом с сервера запрашивается только один файл изображения. Здесь применена технология спрайтов, когда используется только часть одного большого файла. Это хорошо видно на картинке.

Используя свойство CSS «смещение фонового изображения», мы добьемся эффекта анимации пузырьков, меняя фон, когда наводим мышкой на кнопку.
Осталось сказать несколько слов о размерах и закруглениях.

/* The three buttons sizes */

.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

Есть три класса размеров: small, medium и big и rounded (класс закругления). Кнопки масштабируются в зависимости от их размера текста. Нет привязки к ширине и высоте кнопки.
Рассмотрим цветовые схемы на примере синей кнопки. Остальные цвета выполнены по аналогии с этой.

/* BlueButton */

.blue.button{
color:#0f4b6d !important;

border:1px solid #84acc3 !important;

/* A fallback background color */
background-color: #48b5f2;

/* Specifying a version with gradients according to */

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));
}

Только Mozilla и Webkit браузеры поддерживают CSS градиенты на данный момент времени, и у каждого свой синтаксис. Еще стоит добавить, что нет официально принятого синтаксиса определения градиентов, и те браузеры, которые не являются выше названными, будут отображать резервный фон.
В фрагменте кода видно, что мы определяем линейный градиент и радиальный на нем, причем, чтобы смесь градиентов была более плавной, мы назначаем радиальному градиенту свойство прозрачности.

CSS3 анимированные пузырьковые кнопки полностью готовы!

---

Источник: CSS3 Animated Bubble Buttons

---