Создаём красивые радужные кнопки
827материалов
228тем на форуме
3004комментария
6159пользователей

Создаём красивые радужные кнопки


В данной статье я буду создавать красивый 'радужный' css стиль для кнопок, которые можно будет использовать на сайтах с разной тематикой и разной расцветки...

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

ну перейдем к установке:

Установка:

1) Красная кнопка:

html:
Код
<button class="redbutton" type="submit"><span>Кнопка red</span></button>

css:
Код
/*-- Красная кнопка by webo4ka --*/   
.redbutton {   
background-color:#e21616;   
background-image:-ms-linear-gradient(top,#f32929 0,#e82525 50%,#e82525 50%,#e81025 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f32929),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e82525));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#f32929),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e82525));   
background-image:-o-linear-gradient(top,#f32929 0,#e82525 50%,#e82525 50%,#e81025 100%);   
background-image:-moz-linear-gradient(top,#f32929 0,#e82525 50%,#e82525 50%,#e81025 100%);   
background-image:linear-gradient(top,#f32929 0,#e82525 50%,#e82525 50%,#e81025 100%);   
border:1px solid #b52626;   
border-color:#b52626 #a21c1c #881010;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.2),inset -1px 0 0 rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.redbutton:hover {   
background:#e91f1f;   
background:-moz-linear-gradient(top,#e82525 0,#e82525 50%,#e82525 50%,#f32929 100%);   
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e82525),color-stop(50%,#e82525),color-stop(50%,#e82525),color-stop(100%,#f32929));   
background:linear-gradient(top,#e82525 0,#e86e25 50%,#e82525 50%,#f32929 100%);   
}   
.redbutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

2) Оранжевая кнопка:

html:
Код
<button class="orangebutton" type="submit"><span>Кнопка orange</span></button>

css:
Код
/*-- Оранжевая кнопка by webo4ka --*/   
.orangebutton {   
background-color:#e26116;   
background-image:-ms-linear-gradient(top,#f39729 0,#e86e25 50%,#e86e25 50%,#e87025 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f39729),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e87025));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#f39729),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e87025));   
background-image:-o-linear-gradient(top,#f39729 0,#e86e25 50%,#e86e25 50%,#e87025 100%);   
background-image:-moz-linear-gradient(top,#f39729 0,#e86e25 50%,#e86e25 50%,#e87025 100%);   
background-image:linear-gradient(top,#f39729 0,#e86e25 50%,#e86e25 50%,#e87025 100%);   
border:1px solid #b55126;   
border-color:#b55126 #a2451c #883510;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.22),inset -1px 0 0 rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.orangebutton:hover {   
background:#e9691f;   
background:-moz-linear-gradient(top,#e87025 0,#e86e25 50%,#e86e25 50%,#f39729 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e87025),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#f39729));   
background:linear-gradient(top,#e87025 0,#e86e25 50%,#e86e25 50%,#f39729 100%);   
}   
.orangebutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

3) Жёлтая кнопка:

html:
Код
<button class="yellowbutton" type="submit"><span>Кнопка yellow</span></button>

css:
Код
/*-- Жёлтая кнопка by webo4ka --*/   
.yellowbutton {   
background-color:#e2db16;   
background-image:-ms-linear-gradient(top,#f3ec29 0,#e8e625 50%,#e8e625 50%,#e8e510 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f3ec29),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e8e625));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#ff3ec29),color-stop(50%,#e86e25),color-stop(50%,#e86e25),color-stop(100%,#e8e625));   
background-image:-o-linear-gradient(top,#f3ec29 0,#e8e625 50%,#e8e625 50%,#e8e510 100%);   
background-image:-moz-linear-gradient(top,#f3ec29 0,#e8e625 50%,#e8e625 50%,#e8e510 100%);   
background-image:linear-gradient(top,#f3ec29 0,#e8e625 50%,#e8e625 50%,#e8e510 100%);   
border:1px solid #b5b326;   
border-color:#b5b326 #a2971c #888110;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.2),inset -1px 0 0 rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.4);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.yellowbutton:hover {   
background:#e9cf1f;   
background:-moz-linear-gradient(top,#e8ca25 0,#e8ca25 50%,#e8ca25 50%,#f3cb29 100%);   
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e8ca25),color-stop(50%,#e8ca25),color-stop(50%,#e8ca25),color-stop(100%,#f3cb29));   
background:linear-gradient(top,#e8ca25 0,#e86e25 50%,#e8ca25 50%,#f3cb29 100%);   
}   
.yellowbutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

4) Зелёная кнопка:

html:
Код
<button class="greenbutton" type="submit"><span>Кнопка green</span></button>

css:
Код
/*-- Зелёная кнопка by webo4ka --*/   
.greenbutton {   
background-color:#16e220   
background-image:-ms-linear-gradient(top,#29f329 0,#25e825 50%,#25e825 50%,#25e82a 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29f329),color-stop(50%,#25e825),color-stop(50%,#25e825),color-stop(100%,#25e82a));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#29f329),color-stop(50%,#25e825),color-stop(50%,#25e825),color-stop(100%,#25e82a));   
background-image:-o-linear-gradient(top,#29f329 0,#25e825 50%,#25e825 50%,#25e82a 100%);   
background-image:-moz-linear-gradient(top,#29f329 0,#25e825 50%,#25e825 50%,#25e82a 100%);   
background-image:linear-gradient(top,#29f329 0,#25e825 50%,#25e825 50%,#25e82a 100%);   
border:1px solid #26b526;   
border-color:#26b526 #25a21c #138810;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.22),inset -1px 0 0 rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.greenbutton:hover {   
background:#2ec62e;   
background:-moz-linear-gradient(top,#36c036 0,#e86e25 50%,#40ca47 50%,#f39729 100%);   
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#36c036),color-stop(50%,#40ca47),color-stop(50%,#40ca47),color-stop(100%,#f39729));   
background:linear-gradient(top,#36c036 0,#40ca47 50%,#40ca47 50%,#f39729 100%);   
}   
.greenbutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

5) Голубая кнопка:

html:
Код
<button class="bluebutton" type="submit"><span>Кнопка blue</span></button>

css:
Код
/*-- Голубая кнопка by webo4ka --*/   
.bluebutton {   
background-color:#16e2db;   
background-image:-ms-linear-gradient(top,#29f3e7 0,#25e8d3 50%,#25e8d3 50%,#25e8ca 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#29f3e7),color-stop(50%,#25e8d3),color-stop(50%,#25e8d3),color-stop(100%,#25e8ca));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#29f3e7),color-stop(50%,#25e8d3),color-stop(50%,#25e8d3),color-stop(100%,#25e8ca));   
background-image:-o-linear-gradient(top,#29f3e7 0,#25e8d3 50%,#25e8d3 50%,#25e8ca 100%);   
background-image:-moz-linear-gradient(top,#29f3e7 0,#25e8d3 50%,#25e8d3 50%,#25e8ca 100%);   
background-image:linear-gradient(top,#29f3e7 0,#25e8d3 50%,#25e8d3 50%,#25e8ca 100%);   
border:1px solid #26b5b0;   
border-color:#26b5b0 #1ca29a #108881;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.22),inset -1px 0 0 rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.bluebutton:hover {   
background:#1fe9ca;   
background:-moz-linear-gradient(top,#25e8ca 0,#25e8d3 50%,#25e8d3 50%,#29f3e7 100%);   
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#25e8ca),color-stop(50%,#25e8d3),color-stop(50%,#25e8d3),color-stop(100%,#29f3e7));   
background:linear-gradient(top,#25e8ca 0,#25e8d3 50%,#25e8d3 50%,#29f3e7 100%);   
}   
.bluebutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

6) Синяя кнопка:

html:
Код
<button class="darkbluebutton" type="submit"><span>Кнопка darkblue</span></button>

css:
Код
/*-- Синяя кнопка by webo4ka --*/   
.darkbluebutton {   
background-color:#2016e2;   
background-image:-ms-linear-gradient(top,#3c29f3 0,#2e25e8 50%,#2e25e8 50%,#2e25e8 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c29f3),color-stop(50%,#2e25e8),color-stop(50%,#2e25e8),color-stop(100%,#2e25e8));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#3c29f3),color-stop(50%,#2e25e8),color-stop(50%,#2e25e8),color-stop(100%,#2e25e8));   
background-image:-o-linear-gradient(top,#3c29f3 0,#2e25e8 50%,#2e25e8 50%,#2e25e8 100%);   
background-image:-moz-linear-gradient(top,#3c29f3 0,#2e25e8 50%,#2e25e8 50%,#2e25e8 100%);   
background-image:linear-gradient(top,#3c29f3 0,#2e25e8 50%,#2e25e8 50%,#2e25e8 100%);   
border:1px solid #2d26b5;   
border-color:#2d26b5 #251ca2 #1b1088;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.22),inset -1px 0 0 rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.darkbluebutton:hover {   
background:#534afb;   
background:-moz-linear-gradient(top,#2e25e8 0,#2e25e8 50%,#2e25e8 50%,#3c29f3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#2e25e8),color-stop(50%,#2e25e8),color-stop(50%,#2e25e8),color-stop(100%,#3c29f3));   
background:linear-gradient(top,#2e25e8 0,#2e25e8 50%,#2e25e8 50%,#3c29f3 100%);   
}   
.darkbluebutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

7) Фиолетовая кнопка:

html:
Код
<button class="purplebutton" type="submit"><span>Кнопка purple</span></button>

css:
Код
/*-- Фиолетовая кнопка by webo4ka --*/   
.purplebutton {   
background-color:#b916e2;   
background-image:-ms-linear-gradient(top,#cf29f3 0,#ca25e8 50%,#ca25e8 50%,#c625e8 100%);   
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#cf29f3),color-stop(50%,#ca25e8),color-stop(50%,#ca25e8),color-stop(100%,#c625e8));   
background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#cf29f3),color-stop(50%,#ca25e8),color-stop(50%,#ca25e8),color-stop(100%,#c625e8));   
background-image:-o-linear-gradient(top,#cf29f3 0,#ca25e8 50%,#ca25e8 50%,#c625e8 100%);   
background-image:-moz-linear-gradient(top,#cf29f3 0,#ca25e8 50%,#ca25e8 50%,#c625e8 100%);   
background-image:linear-gradient(top,#cf29f3 0,#ca25e8 50%,#ca25e8 50%,#c625e8 100%);   
border:1px solid #9c26b5;   
border-color:#9c26b5 #8a1ca2 #731088;   
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.3),inset 1px 0 0 rgba(255,255,255,0.22),inset -1px 0 0 rgba(255,255,255,0.22),inset 0 1px 0 rgba(255,255,255,0.4),0 1px 0 rgba(100,100,100,0.1),0 2px 0 rgba(150,150,150,0.1);   
font-size:15px;   
color:#fff;   
text-shadow:1px 2px 0 rgba(0,0,0,0.2);   
cursor:pointer;   
-moz-border-radius:5px;   
-webkit-border-radius:5px;   
border-radius:5px;   
height:30px;   
padding:5px 25px;   
}   
.purplebutton:hover {   
background:#c51fe9;   
background:-moz-linear-gradient(top,#c625e8 0,#ca25e8 50%,#ca25e8 50%,#cf29f3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#c625e8),color-stop(50%,#ca25e8),color-stop(50%,#ca25e8),color-stop(100%,#cf29f3));   
background:linear-gradient(top,#c625e8 0,#ca25e8 50%,#ca25e8 50%,#cf29f3 100%);   
}   
.purplebutton:active {   
box-shadow:inset .05em .15em .4em rgba(200,200,200,0.4),inset 0 0 .2em rgba(255,255,255,0.3),inset 0 1px 2px rgba(0,0,0,0.9);   
}

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

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 15.02.2015 в 20:08
Материал просмотрен: 1076 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта