Главная » Раздел uCoz » Авторство Webo4ki

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

1054

9.2 из 10
Проголосовало: 5

В данной статье я буду создавать красивый 'радужный' 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);
}

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

Автор публикации: Загрузка

Загрузка

Вовчик, это его n-й материал

Источник: http://webo4ka.ru/

Ваше мнение о материале Загрузка

Оставить первым комментарий:

Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход

Меню сайта

Категории

Для помощи создания сайта uCoz 25

Скрипты и модификации для Ucoz 2126

Шаблоны форумов Ucoz 28

Шаблоны сайтов Ucoz 433

Авторство Webo4ki 309

php скрипты для ucoz 57

Графика для uCoz 40

Мини-чат

Последние комментарии

dalamkontak написал:

Перейти

CulturalVibes

Попробуйте социальную сеть Dalam Kontak !
Сайт сети: Dkon.app

mrnoobsky написал:

Перейти

CulturalVibes

Это моя работа, которая велась давольно таки давно smile

Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy

Snoopak написал:

Перейти

CulturalVibes

111 мегабайт? wtf? Что в архив напихали?

mrnoobsky написал:

Перейти

CulturalVibes

Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!

geleson2222 написал:

Перейти

Мне не нравится ваш сайт

Последние темы

Флудилка 1603

Flock 23

Webo4ka ЖИВИ! 4

Проблема, в разделе добавления материало... 0

Соберемся вместе?) 3

Отзывы о k43 14

Яндекс забанил сайт. 8

Создать "Создание" - Favicon &... 2

Верстальщик 0

Опрос

Статистика

онлайн

наших

чужих

Сегодня были

Зарегистрировано 8757
Файлов 3018
Комментариев 12487
Отзывов 138
Тем 6539
Постов 62572
тИЦ/PR 30/2

Друзья сайта:

Связаться с администратором для дружбы! В Вовчик

Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94

Web-мастер системы uCoz R Roman_Domnin

Связаться с администратором для дружбы! В Вовчик

Топ пользователей:

02.01.2010 Дата регистрации ID: 1 Вовчик Администратор Группа 2371 Кол.репутации 8683 Кол.сообщений	05.07.2011 Дата регистрации ID: 1238 k43 Друзья Группа 12981 Кол.репутации 2955 Кол.сообщений	26.09.2011 Дата регистрации ID: 1658 Voker VIP Группа 9993 Кол.репутации 2579 Кол.сообщений	18.09.2011 Дата регистрации ID: 1620 BLAzER Друзья Группа 13398 Кол.репутации 2339 Кол.сообщений	03.01.2012 Дата регистрации ID: 2273 Kelin Проверенные Группа 3543 Кол.репутации 2049 Кол.сообщений	02.06.2011 Дата регистрации ID: 1051 BlackPh Пользователи Группа 538 Кол.репутации 1396 Кол.сообщений
01.04.2011 Дата регистрации ID: 692 vover6 Друзья Группа 10431 Кол.репутации 1090 Кол.сообщений	28.03.2011 Дата регистрации ID: 664 InteGrant VIP Группа 1295 Кол.репутации 1080 Кол.сообщений	23.06.2010 Дата регистрации ID: 47 WooFi Друзья Группа 2213 Кол.репутации 1052 Кол.сообщений	02.08.2011 Дата регистрации ID: 1383 Maestro VIP Группа 11394 Кол.репутации 1046 Кол.сообщений	01.03.2011 Дата регистрации ID: 541 Hermes VIP Группа 2147 Кол.репутации 942 Кол.сообщений	17.01.2011 Дата регистрации ID: 389 CreativeBoy Проверенные Группа 2025 Кол.репутации 789 Кол.сообщений

Обратная связь

Правила

RSS
RSS-Load RSS-Forum Sitemap-Load Sitemap-Forum Прямая ссылка
+18

№	Правила	Замечание	Дней
1	Мат в любой форме (в комментариях, в мини-чате, на форуме, в личных сообщениях).	Бан	От 7 дней
2	Спам в любой форме (в комментариях, в мини-чате, на форуме, в личных сообщениях).	Бан	От 7 дней
3	Обман пользователей сайта, введение в заблуждение, а так же обман в разделе "Жалобы".	Бан	От 7 дней
4	Расизм на сайте.	Бан	От 7 дней
5	Рип шаблона webo4ka.ru и его частей.	Бан	От 7 дней
6	Кидание пользователя на деньги и прочего.	Бан	навсегда
7	Попытка взлома, выкладывание скриптов, программ для взлома.	Бан	навсегда
8	Создание повторных профилей в плохи целях.	Бан	навсегда
9	Матерный или порнографический логи, использование матов на аватаре и в подписи.	Бан	навсегда
10	Флуд и Оффтоп на сайте.	Бан	1 день

Мобильная версия

Хостинг от uCoz

Design by Вовчик
Администратор:)