ВКонтакте

Кнопки с градиентом на CSS3

Пример создания кнопок с градиентом, исключительно средствами CSS, не
используя каких либо дополнительных изображений и javascript.
Это ставим в CSS :
Код
</span><span style="font-size: 14pt; font-family: cursive;"><code>.pcv_button{ <br> display:inline-block; <br> padding:5px 13px!important; <br> margin:10px 5px!important; <br> margin-right:0!important; <br> border:solid 1px #000; <br> background:#7abcff; <br> background:-moz-linear-gradient(top,#7abcff 0,#60abf8 44%,#4096ee 100%); <br>
  background:-webkit-gradient(linear,left top,left  
bottom,color-stop(0%,#7abcff),color-stop(44%,#60abf8),color-stop(100%,#4096ee));
  <br> background:-webkit-linear-gradient(top,#7abcff 0,#60abf8 44%,#4096ee 100%); <br> background:-o-linear-gradient(top,#7abcff 0,#60abf8 44%,#4096ee 100%); <br> background:-ms-linear-gradient(top,#7abcff 0,#60abf8 44%,#4096ee 100%); <br>
  background:linear-gradient(top,#7abcff 0,#60abf8 44%,#4096ee  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7abcff',endColorstr='#4096ee',<br>GradientType=0); <br> color:#eee; <br> font:100% Arial,Helvetica,sans-serif; <br> text-align:center; <br> text-shadow:0 1px 0 rgba(55,121,188,.5); <br> text-decoration:none!important; <br>
   
vertical-align:middle;zoom:1;*display:inline;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0
  1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0  
rgba(255,255,255,.3);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1),inset 0 1px 0
  rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.3);box-shadow:0  
1px 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0  
rgba(255,255,255,.3) <br> } <br> .pcv_button:hover{background:#469cf2} <br><br> .pcv_button.yellow{ <br> border-color:#edad14; <br> background:#ffe20b; <br> background:-moz-linear-gradient(top,#fff21e 0,#ffd901 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff21e),color-stop(100%,#ffd901)); <br> background:-webkit-linear-gradient(top,#fff21e 0,#ffd901 100%); <br> background:-o-linear-gradient(top,#fff21e 0,#ffd901 100%); <br>
  background:-ms-linear-gradient(top,#fff21e 0,#ffd901  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff21e',endColorstr='#ffd901',<br>GradientType=0); <br> background:linear-gradient(top,#fff21e 0,#ffd901 100%)} <br> .pcv_button.yellow:hover{background:#fff21e} <br><br> .pcv_button.orange{ <br> border-color:#a3620a; <br> background:#f9800f; <br> background:-moz-linear-gradient(top,#ff9a22 0,#f46e01 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff9a22),color-stop(100%,#f46e01)); <br> background:-webkit-linear-gradient(top,#ff9a22 0,#f46e01 100%); <br> background:-o-linear-gradient(top,#ff9a22 0,#f46e01 100%); <br>
  background:-ms-linear-gradient(top,#ff9a22 0,#f46e01  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9a22',endColorstr='#f46e01',<br>GradientType=0); <br> background:linear-gradient(top,#ff9a22 0,#f46e01 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.orange:hover{background:#ff9a22} <br><br> .pcv_button.blue{ <br> border-color:#0076a9; <br> background:#4eb2f4; <br> background:-moz-linear-gradient(top,#4eb2f4 0,#207ce5 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4eb2f4),color-stop(100%,#207ce5)); <br> background:-webkit-linear-gradient(top,#4eb2f4 0,#207ce5 100%); <br> background:-o-linear-gradient(top,#4eb2f4 0,#207ce5 100%); <br> background:-ms-linear-gradient(top,#4eb2f4 0,#207ce5 100%); <br>
  background:linear-gradient(top,#4eb2f4 0,#207ce5  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4eb2f4',endColorstr='#207ce5',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4)} <br> .pcv_button.blue:hover{background:#499bea} <br><br> .pcv_button.lightblue{ <br> border-color:#0076a3; <br> background:#49b3fc; <br> background:-moz-linear-gradient(top,#76c7ff 0,#1da0fa 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#76c7ff),color-stop(100%,#1da0fa)); <br> background:-webkit-linear-gradient(top,#76c7ff 0,#1da0fa 100%); <br> background:-o-linear-gradient(top,#76c7ff 0,#1da0fa 100%); <br>
  background:-ms-linear-gradient(top,#76c7ff 0,#1da0fa  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#76c7ff',endColorstr='#1da0fa',<br>GradientType=0); <br> background:linear-gradient(top,#76c7ff 0,#1da0fa 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.lightblue:hover{background:#76c7ff} <br><br> .pcv_button.darkblue{ <br> border-color:#1c2e4d; <br> background:#446693; <br> background:-moz-linear-gradient(top,#446693 0,#192b49 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#446693),color-stop(100%,#192b49)); <br> background:-webkit-linear-gradient(top,#446693 0,#192b49 100%); <br> background:-o-linear-gradient(top,#446693 0,#192b49 100%); <br> background:-ms-linear-gradient(top,#446693 0,#192b49 100%); <br>
  background:linear-gradient(top,#446693 0,#192b49  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#446693',endColorstr='#192b49',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.darkblue:hover{background:#436490} <br><br> .pcv_button.green{ <br> border-color:#4e7521; <br> background:#76ab3b; <br> background:-moz-linear-gradient(top,#90c356 0,#649a27 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#90c356),color-stop(100%,#649a27)); <br> background:-webkit-linear-gradient(top,#90c356 0,#649a27 100%); <br> background:-o-linear-gradient(top,#90c356 0,#649a27 100%); <br>
  background:-ms-linear-gradient(top,#90c356 0,#649a27  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#90c356',endColorstr='#649a27',<br>GradientType=0); <br> background:linear-gradient(top,#90c356 0,#649a27 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.green:hover{background:#90c356} <br><br> .pcv_button.limegreen{ <br> border-color:#5e7e00; <br> background:#b9c701; <br> background:-moz-linear-gradient(top,#b9c701 0,#678700 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#b9c701),color-stop(100%,#678700)); <br> background:-webkit-linear-gradient(top,#b9c701 0,#678700 100%); <br> background:-o-linear-gradient(top,#b9c701 0,#678700 100%); <br> background:-ms-linear-gradient(top,#b9c701 0,#678700 100%); <br>
  background:linear-gradient(top,#b9c701 0,#678700  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c701',endColorstr='#678700',<br>GradientType=0);color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.limegreen:hover{background:#a9ba00} <br><br> .pcv_button.saddlebrown{ <br> border-color:#7d2906; <br> background:#bb5a0c; <br> background:-moz-linear-gradient(top,#bb5a0c 0,#661704 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bb5a0c),color-stop(100%,#661704)); <br> background:-webkit-linear-gradient(top,#bb5a0c 0,#661704 100%); <br> background:-o-linear-gradient(top,#bb5a0c 0,#661704 100%); <br> background:-ms-linear-gradient(top,#bb5a0c 0,#661704 100%); <br>
  background:linear-gradient(top,#bb5a0c 0,#661704  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb5a0c',endColorstr='#661704',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.saddlebrown:hover{background:#bb5a0c} <br><br> .pcv_button.red{ <br> border-color:#9e0b0f; <br> background:#e41d24; <br> background:-moz-linear-gradient(top,#fb4e55 0,#d7020a 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fb4e55),color-stop(100%,#d7020a)); <br> background:-webkit-linear-gradient(top,#fb4e55 0,#d7020a 100%); <br> background:-o-linear-gradient(top,#fb4e55 0,#d7020a 100%); <br>
  background:-ms-linear-gradient(top,#fb4e55 0,#d7020a  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb4e55',endColorstr='#d7020a',<br>GradientType=0); <br> background:linear-gradient(top,#fb4e55 0,#d7020a 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.red:hover{background:#fb4e55} <br><br> .pcv_button.darkred{ <br> border-color:#810b01; <br> background:#bc1a02; <br> background:-moz-linear-gradient(top,#bc1a02 0,#660500 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bc1a02),color-stop(100%,#660500)); <br> background:-webkit-linear-gradient(top,#bc1a02 0,#660500 100%); <br> background:-o-linear-gradient(top,#bc1a02 0,#660500 100%); <br> background:-ms-linear-gradient(top,#bc1a02 0,#660500 100%); <br>
  background:linear-gradient(top,#bc1a02 0,#660500  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc1a02',endColorstr='#660500',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.darkred:hover{background:#bc1a02} <br><br> .pcv_button.pink{ <br> border-color:#8f2761; <br> background:#bd5094; <br> background:-moz-linear-gradient(top,#bd5094 0,#70204c 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bd5094),color-stop(100%,#70204c)); <br> background:-webkit-linear-gradient(top,#bd5094 0,#70204c 100%); <br> background:-o-linear-gradient(top,#bd5094 0,#70204c 100%); <br> background:-ms-linear-gradient(top,#bd5094 0,#70204c 100%); <br>
  background:linear-gradient(top,#bd5094 0,#70204c  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd5094',endColorstr='#70204c',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.4) <br> } <br> .pcv_button.pink:hover{background:#bd5094} <br><br> .pcv_button.black{ <br> border-color:#000; <br> background:#111; <br> background:-moz-linear-gradient(top,#4f4f4f 0,#030303 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4f4f4f),color-stop(100%,#030303)); <br> background:-webkit-linear-gradient(top,#4f4f4f 0,#030303 100%); <br> background:-o-linear-gradient(top,#4f4f4f 0,#030303 100%); <br>
  background:-ms-linear-gradient(top,#4f4f4f 0,#030303  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#030303',<br>GradientType=0); <br> background:linear-gradient(top,#4f4f4f 0,#030303 100%); <br> color:#eee!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.8)} <br> .pcv_button.black:hover{background:#4f4f4f} <br><br> .pcv_button.purple{ <br> border-color:#350d4c; <br> background:#7933ac; <br> background:-moz-linear-gradient(top,#9655c6 0,#661e9b 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#9655c6),color-stop(100%,#661e9b)); <br> background:-webkit-linear-gradient(top,#9655c6 0,#661e9b 100%); <br> background:-o-linear-gradient(top,#9655c6 0,#661e9b 100%); <br>
  background:-ms-linear-gradient(top,#9655c6 0,#661e9b  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9655c6',endColorstr='#661e9b',<br>GradientType=0); <br> background:linear-gradient(top,#9655c6 0,#661e9b 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.6) <br> } <br> .pcv_button.purple:hover{background:#9655c6} <br><br> .pcv_button.gray{ <br> border-color:#656565; <br> background:#888; <br> background:-moz-linear-gradient(top,#adadad 0,#707070 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#adadad),color-stop(100%,#707070)); <br> background:-webkit-linear-gradient(top,#adadad 0,#707070 100%); <br> background:-o-linear-gradient(top,#adadad 0,#707070 100%); <br>
  background:-ms-linear-gradient(top,#adadad 0,#707070  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#adadad',endColorstr='#707070',<br>GradientType=0); <br> background:linear-gradient(top,#adadad 0,#707070 100%); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.3)} <br> .pcv_button.gray:hover{background:#adadad} <br><br> .pcv_button.darkgray{ <br> border-color:#21272d; <br> background:#646c75; <br> background:-moz-linear-gradient(top,#646c75 0,#2c333a 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646c75),color-stop(100%,#2c333a)); <br> background:-webkit-linear-gradient(top,#646c75 0,#2c333a 100%); <br> background:-o-linear-gradient(top,#646c75 0,#2c333a 100%); <br> background:-ms-linear-gradient(top,#646c75 0,#2c333a 100%); <br>
  background:linear-gradient(top,#646c75 0,#2c333a  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#646c75',endColorstr='#2c333a',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.3) <br> } <br> .pcv_button.darkgray:hover{background:#646c75} <br><br> .pcv_button.silver{ <br> border-color:#727272; <br> background:#d2d2d2; <br> background:-moz-linear-gradient(top,#d2d2d2 0,#a5a5a5 100%); <br> background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d2d2d2),color-stop(100%,#a5a5a5)); <br> background:-webkit-linear-gradient(top,#d2d2d2 0,#a5a5a5 100%); <br> background:-o-linear-gradient(top,#d2d2d2 0,#a5a5a5 100%); <br> background:-ms-linear-gradient(top,#d2d2d2 0,#a5a5a5 100%); <br>
  background:linear-gradient(top,#d2d2d2 0,#a5a5a5  
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2d2d2',endColorstr='#a5a5a5',<br>GradientType=0); <br> color:#fff!important; <br> text-shadow:0 -1px 0 rgba(0,0,0,.3) <br> } <br> .pcv_button.silver:hover{background:#d2d2d2}</code>

К ссылкам применяем классы с разными цветами:
Код
</span></b><b><span style="font-family: cursive; font-size: 14pt;"><code><a href="#" class="pcv_button">Детали</a> <br> <a href="#" class="pcv_button yellow">Детали</a> <br> <a href="#" class="pcv_button orange">Детали</a> <br> <a href="#" class="pcv_button blue">Детали</a> <br> <a href="#" class="pcv_button lightblue">Детали</a> <br> <a href="#" class="pcv_button darkblue">Детали</a> <br> <a href="#" class="pcv_button green">Детали</a> <br> <a href="#" class="pcv_button limegreen">Детали</a> <br> <a href="#" class="pcv_button saddlebrown">Детали</a> <br> <a href="#" class="pcv_button pink">Детали</a> <br> <a href="#" class="pcv_button black">Детали</a> <br> <a href="#" class="pcv_button purple">Детали</a> <br> <a href="#" class="pcv_button gray">Детали</a> <br> <a href="#" class="pcv_button darkgray">Детали</a> <br> <a href="#" class="pcv_button silver">Детали</a></code>




Не скачивается???
Или войди под своим логином!


Загрузок: 0
Комментариев: 0
Просмотров: 532
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Наш сервер!
Мини профиль
Личный кабинет =)

Партнеры сайта
Лучшие скрипты для юкоз Описание
Статистика
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Наша кнопка




Счетчики
Проверить тИЦ и PR

Рейтинг@Mail.ru

Топ пользователей
№1
131
0
№2
100
0
№3
75
0
№4
0
0

Готовые сервера для css, модели, читы для wot, WarFace и т.д