CSS3 многократно расширил возможности оформления сайта. Теперь возможны самые разнообразные эффекты без применения сторонних скриптов: передвижение, вращение, цветовое разнообразия.
Именно благодаря CSS3 стало возможным сделать невероятно красивые кнопки только с помощью стилей. Кнопка с эффектом нажатия делается на чистом CSS и превращает ссылку в полноценную анимационную кнопку.
Для начала рассмотрим HTML и CSS этих кнопок
HTML
1 2 |
<center><a class="push_but red" href="" rel="nofollow" target="_blank">Button 1</a> <a class="push_but yellow" href="" rel="nofollow" target="_blank">Button 2</a></center> |
Кнопка создается из ссылки путем добаления классов.
push_but это класс отвечающий за стили и анимацию кнопки;
red — стили красной кнопки;
yellow — стили желтой кнопки;
CSS
А вот и CSS стили кнопок. Их Вам нужно скопировать в css файл Вашего сайта.
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
/* Кнопка с нажатием*/ .push_but { display: inline-block; padding: 15px; color: #fff!important; text-decoration: none!important; font-weight: bold; margin: 10px; font-size: 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius 10px; box-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 4px 0 #bbb, -1px 1px 0 #ccc, -2px 2px 0 #c9c9c9, -3px 4px 0 #bbb; } .red {background:linear-gradient(top,#f58f99,#bf1e2e); background:-webkit-linear-gradient(top,#f58f99,#bf1e2e); /* для Chrome и Safari */ background:-o-linear-gradient(top,#f58f99,#bf1e2e); /* для Opera */ background:-moz-linear-gradient(top,#f58f99,#bf1e2e); /* для Firefox */ background:-ms-linear-gradient(top,#f58f99,#bf1e2e); /* для IE10+ */ color: #fff!important; text-decoration: none!important;} .red:hover { background:linear-gradient(bottom,#f58f99,#bf1e2e); background:-webkit-linear-gradient(bottom, #f58f99 5%,#bf1e2e); /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#f58f99,#bf1e2e);/* для Opera */ background:-moz-linear-gradient(bottom,#f58f99,#bf1e2e); /* для Firefox */ background:-ms-linear-gradient(bottom,#f58f99,#bf1e2e); /* для IE10+ */ text-decoration: none;} .yellow {background:linear-gradient(top,#f4da71,#cca509); background:-webkit-linear-gradient(top,#f4da71,#cca509); /* для Chrome и Safari */ background:-o-linear-gradient(top,#f4da71,#cca509); /* для Opera */ background:-moz-linear-gradient(top,#f4da71,#cca509); /* для Firefox */ background:-ms-linear-gradient(top,#f4da71,#cca509); /* для IE10+ */ color: #fff!important; text-decoration: none!important;} .yellow:hover { background:linear-gradient(bottom,#f4da71,#cca509); background:-webkit-linear-gradient(bottom, #f4da71 5%,#cca509); /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#f4da71,#cca509); /* для Opera */ background:-moz-linear-gradient(bottom,#f4da71,#cca509); /* для Firefox */ background:-ms-linear-gradient(bottom,#f4da71,#cca509); /* для IE10+ */ text-decoration: none; } push_but:hover { text-decoration: none; color: #fff; } .push_but:active { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; -moz-transform: translatey(3px); /* Для Firefox */ -ms-transform: translatey(3px); /* Для IE */ -webkit-transform: translatey(3px); /* Для Safari, Chrome, iOS */ -o-transform:translatey(3px); /* Для Opera */ transform: translatey(3px); } |
Изменения цвета кнопки с эффектом нажатия
Хочу Вам рассказать как добавить свои цвета для этой кнокпи. Для этого в качестве примера будем создавать зеленый цвет кнопки. Итак вот шаги, которые вам нужно будет предпринять для того,чтобы создать свой цвет кнопки:
- Скопировать полностью все классы отвечающие за цвет, например класс red. Для этого копируем .red и все его содержимое, которое в фигурных скобках { } и .red:hover со всем его содержимым фигурных скобках { }. Помещаем скопированое содержимое в блокнот в текстовый файл.
- Первым делом нужно изменить названия классов CSS. Например, для нашего примера назовем новый класс green.
В блокноте нажимаете Правка — Заменить (CTRL+H).В поле «Что:» пишите red
В поле «Чем: — green - Изменяем непостредственно цвета. В блокноте копируем цвет #bf1e2e. В палитре цветов HTML выбираем нужный цвет. Я выбрала зеленый Forest Green под номером #228B22. Теперь в блокноте с помощью той же команды «Заменить» меняем цвет #bf1e2e на #228B22.
- Теперь нужно выбрать цвет, тоже зеленый но по-светлее. YellowGreen подойдет. Опять командой заменить меняем уже #f58f99 на #9ACD32.
- Добавляем новый стиль в css файл сайта после уже существующих. Это будет новый цвет кнопки. Вот что у меня получилось в CSS:
12345678910111213.green {background:linear-gradient(top,#9ACD32,#228B22);background:-webkit-linear-gradient(top,#9ACD32,#228B22); /* для Chrome и Safari */background:-o-linear-gradient(top,#9ACD32,#228B22); /* для Opera */background:-moz-linear-gradient(top,#9ACD32,#228B22); /* для Firefox */background:-ms-linear-gradient(top,#9ACD32,#228B22); /* для IE10+ */color: #fff!important;text-decoration: none!important;}.green:hover{background:linear-gradient(bottom,#9ACD32,#228B22);background:-webkit-linear-gradient(bottom, #9ACD32 5%,#228B22); /* для Chrome и Safari */ background:-o-linear-gradient(bottom,#9ACD32,#228B22); /* для Opera */ background:-moz-linear-gradient(bottom,#9ACD32,#228B22); /* для Firefox */ background:-ms-linear-gradient(bottom,#9ACD32,#228B22); /* для IE10+ */text-decoration: none;}
- HTML код новой кнопки теперь будет выглядеть так:
1<center><a class="push_but green" href="" rel="nofollow" target="_blank">Button 1</a></center>
Ну а вот собственно и результат: