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

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

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

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

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

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

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

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

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

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

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

На данный момент только браузеры семейства Mozilla и WebKit поддерживает градации CSS, и то – с сильными различиями. Остальные браузеры будут отображать откатную версию цвета. Возможно, вы заметили, что мы не включили версию правил градаций с предварительно внесёнными префиксами. Это потому, что градации пока что не являются официальной частью CSS-спецификации, и пока что разработчики не пришли к единому варианту поддержки.

Вот и все. Готово!

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

Читайте также: