Красивые кнопки клавиатуры css. Скруглённые уголки. Кнопки с тенью и градиентом на CSS
Влад Мержевич
Стандартные кнопки, созданные через тег
Рис. 1. Исходная и измененная кнопка
Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.
За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.
Самое простое сделать закругление уголков, для чего используем свойство border-radius , задавая ему нужный радиус скругления. Как обычно, работает не во всех браузерах, поэтому придется добавлять полный комплект. В итоге получается следующее.
Moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */
Вид кнопок в разных браузерах показан на рис. 2.
Рис. 2. Кнопки со скругленными уголками
В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.
Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.
background: -moz-linear-gradient(#00BBD6, #EBFFFF);
В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.
Chrome, Safari
background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
Браузер IE идет своим путем и для разных эффектов применяет свойство filter , в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.
Опера отдыхает, в ней градиенты еще не реализованы.
Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).
Пример 1. Кнопки с линейным градиентом
Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки - она выглядит плоской, как доска.
Рис. 3. Вид кнопки с градиентом
Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.
background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
Вместо двух значений вставляем желаемое количество цветов, градиент будет плавно переходить от одного цвета к другому.
Chrome, Safari
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.
Пример 2. Кнопки с улучшенным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Результат примера показан на рис. 4.
Рис. 4. Градиент, какой надо градиент
Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил .
Рис. 5. Такие разные кнопки
Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).
Рис. 6. Наложение фона на уголки в IE 9
Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.
Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3 , но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, .
Откроем файл index.html и создадим простенькую структуру
Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.
Body {
}
Button {
display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
border-radius: 50%;
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
}
Фон для документа и наших кнопок я взял с сайта subtlepatterns.com .
Мы делаем наши div строчно-блочными, чтобы они выстроились по горизонтали, задаём им высоту, ширину, отступ от краёв браузера, скругление 50% , чтобы получить круг, и при наведении курсор делаем pointer . Здесь нет ничего сложного, но тень я не зря отделил в стилях, т.к. это именно та часть, которая может вызвать затруднения, хотя, там тоже всё просто, и это вы сейчас увидите.
Задав первую тень, мы уже увидим контур нашего круга:
Box-shadow: 0 3px 20px rgba(0,0,0,.25);
Затем мы задаём внутреннюю тень , чтобы у нас сверху появилась такая оконтовочка, и кнопка стала более объёмной.
Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);
Следующая внешняя тень нужна для того, чтобы немного затемнить место под кнопкой снизу, а следующая внутренняя затемняет пространство внутри кнопки для пущего эффекта)
Box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
Как видите, по-началу кажется сложно, много свойств, но, если разобраться, то всё оказывается намного проще. Итак, вот наш конечный результат:
Теперь реализуем поведение при наведении на блок
Button:hover {
box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
}
Мы уже разобрались с тенями в блоке, а теперь попробуйте разобраться сами с тем, что происходит при наведении. Точно так же оставьте только одну тень и посмотрите, что происходит, а затем добавьте вторую и посмотрите, что изменилось, и так далее.
Наконец, давайте добавим иконки нашим кнопкам, чтобы было не очень скучно. Для этого изменим немного html
Btn-photo {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
}
Btn-settings {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) center center no-repeat;
}
Btn-tag {
background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) center center no-repeat;
}
Здесь мы просто добавляем второй фон для каждой кнопки, взяв иконки с сайта defaulticon.com .
Вот и всё. Сегодня мы рассмотрели, как создать круглые кнопки на CSS3 .
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div { border-radius: 10px; } | Радиус скругления для всех уголков сразу. | |
| div { border-radius: 0 10px; } | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div { border-radius: 20px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div { border-radius: 20px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображения
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Накидал тут эскизик как я вижу кнопку Демо. Идея тут в следующем, сделать кнопку как бы из двух частей, она должна быть анимированной, при наведении раскрываться вторая часть, вытягивая за собой внутренний блок, где находится надпись, а в момент убирания курсора все должно вернуться в исходное положение.
- в уроке задействуем основные стили как:
- псевдоэлементами :before , :after ;
- при помощи position с позиционируем блоки
- псевдоклассами :hover , :activ определим стили при наведении и клику мышки
- и сделаем плавную анимацию при помощи transition, transform
HTML структура кнопки
Имея эскиз перед глазами можно уже представить, как это реализовать на CSS. Нам понадобится основной блок, где будет помещены все элементы кнопки, это будет ее оберткой. Затем у кнопки будет внутренняя часть, которая выезжать при неведении мышки, внутри будем располагать текст «Смотреть пример». Затем идет левая и правая часть кнопки, между ними расположим псевдоэлементы треугольной формы. Да и чуть не забыл, картинка в виде стрелочек. Все это нам нужно будет анимировать, и придать кнопки определенную текстуру.
Открываем свою среду разработки, в моем случае я использую PhpStorm
, создам в ней index.html
, пропишу название «Button DEMO animation CSS
». Создаем
Div.dws-button>a>div.b-demo+div.b-text+div.b-img
Жмем применить и структура сформирована.
В ссылке поставим решетку (# ), что бы она была активна. Пропишем название кнопки "Демо " , в среднем блоке указываем текст "Смотреть пример ", и в нижнем вставляем путь до картинки.
Создаем директорию в которую скопирую картинки, вы можете вставить свои картинки или скачать архив с готовы кодом.
Прописываем путь до картинки src="img/icon.png"
, указываем alt="button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.
Описываем CSS стили кнопки
Следующим этапом, создадим CSS файл style.css и подключим его к индексной странице. Сразу подключаем по ходовой шрифт Cuprum , и больше нам индексный файл не понадобится.
Переходим в style.css , подключаю картинку на задний фон, и сбрасываем всем элементам отступы в блоке .dws-button .
Body{ background-image: url("img/ep_naturalwhite.png"); } .dws-button *{ margin: 0; padding: 0; }
Самой кнопке задаем стиль текста, пропишем ширину ее в 250 пик. и высоту в 70 пик., центруем по середине экрана и делаем отступы с верху в 250 пик. Затем присвоим ей окантовку в 1 пик. для того что бы мы могли видеть границы кнопки при ее анимации когда она будет растягиваться.
Dws-button{ font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; outline: 1px solid #faa21a; }
У ссылок убираем подчеркивание и назначим им серый цвет.
Dws-button a{ text-decoration: none; color: #2e2e30; }
Затем сразу отберем блоки и зададим им единый белый цвет.
B-demo, .b-img{ background: #ffffff; }
Далее опишем каждый блок по отдельности, отбираем класс .b-demo
и зададим блоку ширину в 105 пик.. Высоту зададим при помощи line-height: 70px;
, центруем текст и увеличим шрифт до 30 пик.. Делаем его полностью заглавными буквами, и padding
задаем левые и правые отступы.
B-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; }
Отбираем следующий блок .b-text
, присваиваем ему темный цвет, текст сделаем светлым, указываем размер ему в 24 пик., задаем ширину в 150 пик. и при помощи отступов уменьшим высоту блока. Центруем текст, и задаем внутренние отступы.
B-text{ background: #3e3f3e; color: #ffffff; font-size: 24px; width: 150px; line-height: 20px; text-align: center; padding: 10px 0 10px 10px; }
Отбираем правый блок, устанавливаем ширину в 45 пик. высоту тоже в 45 пик. .padding
отцентруем элемент картинки чуть сместив ее правее.
B-img{ width:45px; line-height: 45px; padding: 20px 0 0 20px; }
Затем с позиционируем эти элементы по отношению блока с классом .dws-button
. Для этого присваиваем классу position: relative;
а вложенным всем блокам position: absolute;
.
Блоки все подстроили под родителя, и теперь пробежимся по ним и отцентруем их.
Классу .b-demo укажем начальные позиции по нулям с лева и сверху и добавим z-index:10; что бы этот блок был выше остальных.
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; }Блоку с текстом сделаем отступы с лева и сверху по 5 пик.
А блок с картинкой .b-img делаем отступ с левой стороны в 140 пик. , и сверху задаем в 0. Тут же закруглим углы с правой стороны в 10 пик.
.b-img{ width:45px; line-height: 45px; padding: 20px 0 0 20px; left: 140px; top: 0; border-radius: 0 10px 10px 0; }И тоже проделаем с левым блоком.
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; border-radius: 10px 0 0 10px; }Затем нам нужно сделать два псевдоэлемента, это те самые уголки, которые расположены на их соединении.
Отбираем правый блок и присваиваем ему псевдоэлемент :before
, устанавливаем ширину и высоту по нулям, и при помощи border
рисуем треугольник. Далее нам нужно его с позиционировать, для этого добавляет его в наш набор.
И выравниваем таким образом, что бы он встал в конце блока.
B-demo:before{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #ffffff; border-bottom: 35px solid transparent; top: 0; left: 129px; }
Обратите внимание, что все блоки мы выравниваем по левому краю, а не по правому, так как анимация будет проходить с лева на права и это ключевой момент.
Затем отбираем следующий блок с картинкой и присваиваем ему псевдоэлемент :after . Прописываем контент, далее ширину и высоту ставим по нулям и при помощи border рисуем треугольник. Абсолютно позиционируем, и выравниваем его по левому краю.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after{ position: absolute; } .b-img:after{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #3e3f3e; border-bottom: 35px solid transparent; top: 0; left: 0; }Основной каркас кнопки у нас готов, осталось ее анимировать и придать ей красивое оформление.
Анимация кнопки в CSS
В основном кнопка готова и приступим к ее анимированию, напишу комментарий, откуда будем писать стили. Первым делом описываем действия при наведении на кнопку.
/* Animation:hover */ .dws-button a:hover .b-demo{ width: 50px; padding: 0 10px 0 10px; font-size: 20px; }
Сразу всем блокам пропишем анимацию плавного перемещения, для этого отбираем их все и задаем transition для всех свойств в 0.5 секунды.
Dws-button a:hover .b-demo, .dws-button a:hover .b-demo:before, .dws-button a:hover .b-text, .dws-button a:hover .b-img, .dws-button a:hover .b-img:after{ transition:all 0.5s; }
Прописываем перемещение с этим блоком псевдоэлементу :before на 69 пик. влево.
Dws-button a:hover .b-demo:before{ left: 69px; }
Делаем перемещение второй части кнопки в правую сторону, указываем, что при наведении сместить блок на 185 пик.
Dws-button a:hover .b-img{ left: 185px; }
Затем блок с текстом будем на 50 пик. выдвигать, отбираем и прописываем перемещение блока.
Dws-button a:hover .b-text{ left: 50px; }
Для того что бы кнопка сразу не схлопывалась после того как убираем курсор, нам нужно задать для элементов блоков в покое transition , сделаем более медленное сживание кнопки в 1.5 сек.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after{ position: absolute; transition:all 1.5s; }Затем анимируем эффект вращения иконки при помощи transform на 360 градусов, отбираем картинку и прописываем transform: rotate(360deg) ; и также укажем opacity: 0.5; что бы картинка делалась немного прозрачней.
Dws-button a:hover img{ transform: rotate(360deg); opacity: 0.5; }
Если сейчас наведем на кнопку, эффекта вращения мы не увидим, так как нужно прописать самой картинке transition . Отбираем и прописываем ей это свойство.
B-img img{ transition:all 1.5s; }
Кнопка с эффектом анимированного выдвижения готова, можно скрыть outline, он больше не понадобится и заняться ее оформлением.
Dws-button{ font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; /*outline: 1px solid #faa21a;*/ position: relative; }
Мы сделали полноценную анимированную кнопку и теперь можно ей придать более красивый вид.
Оформление кнопки в CSS
После того как мы провели все работа по ее свойствам, позицианированию и анимации, приступим к ее оформлению. Поменяем у кнопки общий стиль, добавим background к блокам, сделаем у текста тень и добавим псевдокласс :active который будет срабатывать при клике мышки.
Переходим в дополнительный сервис где у меня уже подготовлены присеты и я просто копирую стиль для кнопки, далее заменяю свой предыдущий на него.
B-demo, .b-img{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+65,6d0019+100 */ background: #f22404; /* Old browsers */ background: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
У псевдоэлемента прописываем красный цвет под фон ингридиента кнопки.
.b-demo:before{ content: ""; width: 0; height: 0; border-top: 35px solid transparent; border-left: 10px solid #7B040E; border-bottom: 35px solid transparent; top: 0; left: 129px; }Заменим у ссылок цвет с темного на белый.
Dws-button a{ text-decoration: none; color: #ffffff; }
Придадим тексту тень, для этого допишем в классе .b-demo text-shadow: -1px -1px 1px #000000;
.b-demo{ width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: uppercase; padding: 0 10px 0 15px; left: 0; top: 0; z-index: 10; border-radius: 10px 0 0 10px; text-shadow: -1px -1px 1px #000000; }Внутренний блок сделаю в голубоватом цвете.
.b-text{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ background: #b3dced; /* Old browsers */ background: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback on horizontal gradient */ color: #ffffff; font-size: 24px; width: 150px; line-height: 20px; text-align: center; padding: 10px 0 10px 10px; left: 5px; top: 5px; }Сразу меняем цвет у псевдоэлемента :after
Заменим картинку, в место черной установим белую, в начале урока я их закачивал две штуки, прописываем вторую иконку.
И завершающем этапом, опишем стили при клике мышки
Пропишу тут соответствующий комментарий, затем под ним отбираем два блока с псевдоклассом :active , задаем ингредиент только перевернутый.
/* Animation:active */ .dws-button a:active .b-demo, .dws-button a:active .b-img{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+49,6d0019+70 */ background: #f22404; /* Old browsers */ background: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49%, #6d0019 70%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
Блоку на заднем плане сделаем градиент в этом стиле только отзеркалиный и добавим эффект тени.
Dws-button a:active .b-text{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ background: #b3dced; /* Old browsers */ background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback on horizontal gradient */ box-shadow: 0 0 3px 1px #82DCFF; }
Завершающим стилем пропишем при клике вращение иконки в обратном направлении с ее полным проявлением.
Dws-button a:active img{ transform: rotate(0deg); opacity: 1; }
Получалась довольно эффектная кнопка, которую легко можно модифицировать и оформить под свои задачи. Рекомендую заменить общее ее оформление, сделайте свои присетты, поэкспериментируйте с различными вариантами градиентов, возможно, вы придумаете более оригинальные способы анимации и обязательно поделитесь с ними в комментариях.
Всем кому понравился материал обязательно поделитесь им с друзьями.
Доброго времени суток, уважаемые читатели . В этот день мы будем создавать набор красивых иконок для сайта с помощью CSS3 и анимации . Благодаря этой кнопки Вы сможете превратить любую ссылку на странице в анимированную кнопку с простым присвоением имени класса. В общем ничего тут сложного нет как на первый взгляд.
Напоминаю, что эти кнопки являются бесплатными, и вы сможете их бесплатно скачать . Поехали.
Анимированные 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; }
В коде выше указаны три класса — это big , medium и small . Соответственно к каждому классу ставим разные значения в пикселях. Всё хорошо видно на коде выше.
А теперь самое интересная часть — это цвета. Тут, в принципе тоже ничего сложного нет.
/* Гоубая кнопка */ .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)); }
Вот на этом пока что и всё. Хочу заранее предупредить, что в настоящее время, возможно кнопки не будут работать в некоторых браузерах, потому что, ещё пока, не все они поддерживают CSS3. Но мне кажется, что эта проблема скоро решится.
