css3_animated_buttons

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

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

В JavaScript нет необходимости, потому что в наборе реализовано четыре(!) цветовых схемы и три(!) типоразмера кнопок.

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

HTML

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

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

Имена классов подобраны таким образом, чтобы их легко было запоминать, но при этом могут возникнуть проблемы с совпадением имен классов на вашей странице. Помните это.(:

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

CSS

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

buttons/buttons.css

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

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

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

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

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

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

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


Оставить комментарий