Кнопки на CSS - Другое - Каталог лучших скриптов!

Добавить скрипт

Рекламный блок

Меню сайта

Форум

Блог

Мини-чат

Другое

Вход на сайт

Мини-чат

Статистика

Пользователи

Гости сайта

Кнопки на CSS

Добавил: Initro

Категория: Другое

Скачек: 0

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

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

Code

.button.black {background: url('http://usite.su/images/new/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://usite.su/images/new/highlight_faint.png')
repeat-x top #404040}
  .button.black:active {background: url('http://usite.su/images/new/highlight_faint.png')
repeat-x top #151515}

  .button.red {background: url('http://usite.su/images/new/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://usite.su/images/new/highlight_faint.png') repeat-x
top #dd0101}
  .button.red:active {background: url('http://usite.su/images/new/highlight_faint.png') repeat-
x top #b60404}

  .button.blue {background: url('http://usite.su/images/new/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://usite.su/images/new/highlight_faint.png') repeat-
x top #0278e7}
  .button.blue:active {background: url('http://usite.su/images/new/highlight_faint.png')
repeat-x top #005eb6}

  .button.green {background: url('http://usite.su/images/new/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://usite.su/images/new/highlight_faint.png')
repeat-x top #74bc15}
  .button.green:active {background: url('http://usite.su/images/new/highlight_faint.png')
repeat-x top #62a011}

Надеюсь догадались, что button.black - это черная кнопка,button.red - красная,button.blue - синяя,button.green - зеленая.
Код вызова самих кнопок-
Черная:

Code

<a href=''><div class='button black'>Я черная кнопка</div></a>

Синяя:

Code

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

Зеленая:

Code

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

Красная:

Code

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

Всё!

Жаловаться на материал

Теги материала: CSS, на, Другое, кнопки

Источник: http://usite.su

Данный материал еще никто не комментировал. Вы можете сделать это первым!

Всего комментариев: 0

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

Вверх

Design by Initro

Администрация не несёт ответственности за содержащие файлы на данном портале.
Все материалы на сайте принадлежат исключительно их владельцам!
Конструктор сайтов — uCoz.