CSS3 кнопки “Bubble” с анимацией пузырей!

Сегодня мы создаем css3 кнопки, с анимацией фона. С помощью этого набора, Вы можете легко превратить любую ссылку на своей странице в анимированную кнопку – просто добавив соответствующие имена классов.

Также советую обязательно посмотреть набор кнопок из более чем 30 штук, с разными цветами и CSS3 свойствами.

Без использования JavaScript. В этом наборе уже доступны четыре цвета темы и три размера (маленький, средний и большой). Красивая кнопка для сайта – цель нашего урока! Давайте начнем…

HTML структура

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

Есть четыре готовых класса с цветами – синий (blue), зеленый (green), оранжевый (orange) и серый (gray). Остальные классы, которые Вы видите были добавлены в примере выше, являются необязательными. Также Вы можете выбрать размер кнопки – маленький (small), средний (medium) и большой (big), и еще один класс – закругление (rounded), что её овальной.

Имена классов просты и легко запоминаются, но при этом возникает опасность конфликтов со стилями, которые уже есть на Вашем сайте, поэтому за этим тоже нужно проследить.

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

CSS стили

Весь код стилей CSS для кнопок находится в файле buttons.css. Вам нужно просто поместить его на свой сайт и спокойно использовать.

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

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

Она имеет inline-block, что позволяет ей оставаться на одной линии, вокруг текста (как встроенный элемент), но и вести себя как блок по отношению к отступам.

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

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

Теперь скажем несколько слов о размерах и скруглении углов:

Вот три класса разных размеров – small, medium и big, а также класс rounded овальной кнопки. Кнопки масштабируются при изменении размера текста. Таким образом, никакой фиксированной ширины и высоты нет.

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

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

На данный момент не все браузера поддерживают свойства градиент CSS3. Поэтому, остальные браузеры отобразят резервный цвет фона.

В фрагменте выше, Вы можете видеть, что мы определяем линейный и радиальный градиент. Чтобы смесь градиентов была более плавной, мы определяем радиальный с RGBA, что делает внешний цвет градиента полностью прозрачным.

На этом наши CSS3 кнопки с анимацией пузырей готовы!

Заключение

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