Всё для Online игр и даже больше!
 
 
  • Страница 1 из 1
  • 1
Форум » Все Для Ucoz'a » Скрипты для ucoz » Кнопки на CSS для ucoz
Кнопки на CSS для ucoz
artimДата: Среда, 02.01.2013, 15:59 | Сообщение # 1
Группа: Администраторы
Сообщений: 395
Награды: 4
Репутация: 4

Кнопки на CSS для ucoz, новичкам думаю пригодится. Есть 4 цветовых варианта: Черная, красная, зеленая и синяя кнопка. Так же цвета можно и самому настроить. Работает в Mozilla Firefox, Google Chrome и в Opera.

Уставнока:

Итак начнем.
Это вставляем в css:

Код
.button.black {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #272727; display: inline-block;border: 1px solid #161616;border-radius: 3px;color: #fff;padding: 5px;margin-bottom: 3px}   
   .button.black:hover {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #404040}   
   .button.black:active {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #151515}   

   .button.red {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #cd0000;display: inline-block;border: 1px solid #8a0000;border-radius: 3px;color: #fff;padding: 5px;margin-bottom: 3px}   
   .button.red:hover {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #dd0101}   
   .button.red:active {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #b60404}   

   .button.blue {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #0173dd;display: inline-block;border: 1px solid #294c8b;border-radius: 3px;color: #fff;padding: 5px;margin-bottom: 3px}   
   .button.blue:hover {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #0278e7}   
   .button.blue:active {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #005eb6}   

   .button.green {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #6db114;display: inline-block;border: 1px solid #5a7f2a;border-radius: 3px;color: #fff;padding: 5px;margin-bottom: 3px}   
   .button.green:hover {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #74bc15}   
   .button.green:active {background: url('http://uwebo4ka.3dn.ru/scripts/4css_kn/highlight_faint.png') repeat-x top #62a011}


Надеюсь догадались, что button.black - это черная кнопка, button.red - красная, button.blue - синяя, button.green - зеленая.
Код вызова самих кнопок:
Черная:
Код
<a href=''><div class='button black'>Я черная кнопка</div></a>


Синяя:
Код
<a href=''><div class='button blue'>Я синяя кнопка</div></a>

Зеленая:
Код
<a href=''><div class='button green'>Я зеленая кнопка</div></a>

Красная:
Код
<a href=''><div class='button red'>Я красная кнопка</div></a>

Готово.
Прикрепления: 0605043.png(29.3 Kb)

Оффлайн
Форум » Все Для Ucoz'a » Скрипты для ucoz » Кнопки на CSS для ucoz
  • Страница 1 из 1
  • 1
Поиск: