Создаем анимированные кнопки для сайта
Красивые кнопки всегда притягивает взор к необходимой информации. Сегодня мы с вами будем разрабатывать весьма полезный набор кнопок-пузырьков с множественными фоновыми изображениями и анимациями на CSS3. С помощью такого набора вы с лёгкостью сможете превратить любую гиперссылку на странице в привлекательную, анимированную пузырьками кнопку, лишь задав ей определенный класс. Здесь не требуется ничего связанного с javascript. Мы предлагаем вам 4 цветовые схемы и три размера путём добавление дополнительного имени класса.
Такие кнопки станут отличным дополнением для любого сайта, ведь их достаточно легко редактировать при этом они нужным образом маскируют ссылки на сайта, в элегантные элементы перехода.
Шаг 1. HTML
Для того чтобы превратить обычную ссылку на странице в забавную анимированную CSS3-кнопку, вам надо лишь добавить класс .button и один из поддерживаемых цветов. Ниже вы можете посмотреть несколько примеров:
1 2 3 |
<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 и более старыми версиями.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.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, мы определяем анимацию, в которой две версии фонового изображения будут простираться от верхней части до нижней, что создаст эффект мыльного пузырька при наведении курсора мыши.
Теперь рассмотрим классы размера и закруглённых углов.
1 2 3 4 5 6 7 8 9 |
.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). Кнопки масштабируются автоматически в зависимости от текста. Таким образом, здесь у нас отсутствуют параметры ширины и высоты.
Теперь пойдём дальше – к классам цвета. Ниже мы приведём пример определения лишь синей кнопки, но знайте, что все остальные методы абсолютно такие же.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.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)); } |
Каждое имя класса определяет уникальный набор параметров – цвет кнопки, тень текста, а также набор фоновых изображений. Помните, что мы используем параметр фона для того чтобы добавить несколько изображений к кнопке. Они нанесены друг на друга, и лишь одно отображается поверх всех.
На данный момент только браузеры семейства Mozilla и WebKit поддерживает градации CSS, и то – с сильными различиями. Остальные браузеры будут отображать откатную версию цвета. Возможно, вы заметили, что мы не включили версию правил градаций с предварительно внесёнными префиксами. Это потому, что градации пока что не являются официальной частью CSS-спецификации, и пока что разработчики не пришли к единому варианту поддержки.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 22.06.2012 в 13:43, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |