Создаем анимированные кнопки для сайта

Красивые кнопки всегда притягивает взор к необходимой информации. Сегодня мы с вами будем разрабатывать весьма полезный набор кнопок-пузырьков с множественными фоновыми изображениями и анимациями на CSS3. С помощью такого набора вы с лёгкостью сможете превратить любую гиперссылку на странице в привлекательную, анимированную пузырьками кнопку, лишь задав ей определенный класс. Здесь не требуется ничего связанного с javascript. Мы предлагаем вам 4 цветовые схемы и три размера путём добавление дополнительного имени класса.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Для того чтобы превратить обычную ссылку на странице в забавную анимированную CSS3-кнопку, вам надо лишь добавить класс .button и один из поддерживаемых цветов. Ниже вы можете посмотреть несколько примеров:

<a class="button blue big" href="#">Большая</a>

<a class="button blue medium" href="#">Средняя</a>

<a class="button small blue rounded" href="#">Закругленная</a>

Нам доступны классы для 4-х цветов: синий, зелёный, оранжевый и серый. Остальные классы, которые могут быть привязаны к ссылкам выше, опциональны. Вы можете выбрать размер (маленький, средний или большой), а также ещё один класс «rounded», который ещё больше закругляет углы кнопки.

Имена классов уже выбраны, поэтому их будет очень просто запомнить, но также стоит помнить, что с такими именами повышается вероятность смешивания с уже имеющимися классами в коде страницы.

Шаг 2. CSS

Весь CSS-код, относящийся к анимированным кнопкам, располагается в файле buttons.css. Это значительно упрощает процесс внедрения и использования.

Помните, что в коде, предложенном ниже, мы указали 2 версии одного и того же параметра в нескольких местах. Это нужно для заполнения разницы восприятия браузерами кода CSS. Они парсят правила по очереди, а затем применяют их, игнорируя те, что не распознают. Таким образом, у нас будет версия кода, которую распознает любой браузер, а также мы заполним разницу между новыми браузерами, воспринимающими CSS3 и более старыми версиями.

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

-o-transition:background-position 1s;

transition:background-position 1s;

}

.button:hover{

background-position:top left;

background-position:top left, bottom right, 0 0, 0 0;

}

Первое, что нам нужно сделать, это определить класс кнопки. Это будет каркасом всех кнопок, так как здесь мы определяем позиционирование, используемый шрифт, а также стили фона.

Как будет видно через секунду, у каждой кнопки есть 4 фоновых изображения. Хотя это может вызвать сомнения, спешим сообщить вам, что с сервера будет запрошен лишь один файл. Первые два фоновых изображения — это нижняя левая и верхняя правая части пузырька, которые можно будет рассмотреть на изображении ниже, а последующие два изображения – это просто CSS-градации.

Как уже было указано выше, фон пузырька отображён в виде 2 отдельных изображений, смещённых при помощи параметра background-position. Используя параметр перехода CSS3, мы определяем анимацию, в которой две версии фонового изображения будут простираться от верхней части до нижней, что создаст эффект мыльного пузырька при наведении курсора мыши.

Теперь рассмотрим классы размера и закруглённых углов.

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

}

Здесь у нас 3 классовых имени (small, medium, big и rounded). Кнопки масштабируются автоматически в зависимости от текста. Таким образом, здесь у нас отсутствуют параметры ширины и высоты.

Теперь пойдём дальше – к классам цвета. Ниже мы приведём пример определения лишь синей кнопки, но знайте, что все остальные методы абсолютно такие же.

.blue.button{

color:#0f4b6d !important;

border:1px solid #84acc3 !important;

background-color: #48b5f2;

-moz-radial-gradient( center bottom, circle,

rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),

-moz-linear-gradient(#4fbbf7, #3faeeb);

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

-moz-radial-gradient(center bottom, circle,

rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),

-moz-linear-gradient(#63c7fe, #58bef7);

-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, и то – с сильными различиями. Остальные браузеры будут отображать откатную версию цвета. Возможно, вы заметили, что мы не включили версию правил градаций с предварительно внесёнными префиксами. Это потому, что градации пока что не являются официальной частью CSS-спецификации, и пока что разработчики не пришли к единому варианту поддержки.