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


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

492
8.6 из 10
Проголосовало: 3






В данной статье я буду создавать красивый 'радужный' 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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: