Анимированные кнопки без JavaScript

4 апреля 2011 года, Размещено в категории: HTML / CSS

Это гостевой пост, сегодня в гостях у нас GerinG с хорошим уроком по созданию анимированных кнопок для сайта, используя только CSS3.

Все элементы интерфейса сайта хотелось бы сделать “живыми” и максимально дружелюбными для пользователя, который заходит к вам. Сегодня мы попробуем решить задачу анимации кнопки, добавить ей некоторой интерактивности. Будем использовать для решения задачи CSS3, а конкретно - возможность назначить несколько изображений для фона объекта.
анимированные кнопки

В общем в итоге получится вот так (скриншот, рабочий пример можете посмотреть в Демо):

анимированные кнопки, пример

Итак - первым делом нужно подготовить графику, которая нам понадобится для бэкграунда нашей кнопки. Он будет меняться при наведении мышки на него, работает псевдоселектор :hover. Я использовал пузырьки (с мыслями о пиве в пятницу ;) ),

Все исходные материалы можно скачать в конце статьи, а пока несколько слов о графике. Я использую в данном случае прозрачный PNG, который и накладывается на любого цвета кнопку, в том числе и с градиентом.

Идем дальше - структура HTML:

 
<div id="buttonContainer">
        <a class="button big blue" href="#">Большая кнопка</a></div>

Как видно, код очень простой - блок-контейнер и внутри него ссылка. Самое интересное, как обычно, в файле стилей ;) Посмотрим, что там такое...

*{margin:0;padding:0} /*обнуляем стили*/
 
body {color:#eee;font:15px Calibri, Arial, sans-serif}
 
#buttonContainer{
border:1px solid #F4F4F4;
margin:120px auto 0;overflow:hidden;
padding:20px 0 35px 45px;width:295px;
-moz-box-shadow:0 0 10px #C4C4C4;
-webkit-box-shadow:0 0 10px #C4C4C4;
box-shadow:0 0 10px #C4C4C4}
 
#buttonContainer a{margin:15px 15px 0 0}
 
a,a:visited {text-decoration:none;outline:none;
 
border-bottom:1px dotted #97cae6;color:#97cae6}
 
a:hover{border-bottom:1px dashed transparent}
 
.clear{clear:both}

Тут пока все просто, обнулили стили, шрифт, цвет фона. Оформили блок-контейнер и гиперссылки. Смотрим дальше:

.button{
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;
 
/*Двигаем фон с помощью CSS3, числом можно регулировать время исполнения */
-webkit-transition:background-position 2s;
-moz-transition:background-position 2s;
transition:background-position 2s}

Стили для класса .button. Пояснения я даю сразу в коде, но если что то непонятно - вэлкам в комментарии, расскажу подробнее.

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

Собственно - это весь код. Немного расскажу о принципе работы всего этого. У нас есть большой файл с изображением пузырьков(как в моем случае), он гораздо больше кнопки и мы этим нещадно пользуемся :) Меняя его положение на кнопке, мы добиваемся эффекта движения. Я несколько раз объявляю цвет фона, зачем это нужно? Дело в том, что файл стилей браузером начинает разбираться с конца и те стили, что он не понимает, игнорируются.

Таким образом мы в современных браузерах показываем кнопку с градиентной заливкой, остальные увидят только сплошной цвет. Аналогично и с пузырьками, PNG прозрачный, мы задаем цвет фона и накладываем сверху картинку - в итоге у человека просто кнопка, без движения.




Интересно будет почитать:



  1. mukhacheff Сказал:
    14 апреля 2011

    Сослался в твиттере, пост отличный.

    Ответить
  2. Алексей Сказал:
    8 ноября 2011

    Твое мнение:Отлично.. Только не совсем разобрался что куда вставлять на вордпресс блоге ((
    С buttons.ccs все понятно — вставляем в файл стилей, а картинку?! Ее куда??

    Ответить

Прокомментировать

Метки: