Главная » Скрипты для uCoz » Другие скрипты » Стилизация кнопок (универсальная кнопка)

Стилизация кнопок (универсальная кнопка)

img
В этом уроке мы будем делать вот такую кнопку
Единственный минус в этой кнопке что она может быть не шире 300 пикселей
Начнем!
Ставим в css
Code
.button {margin:0 1px;display:inline-block;border-top:1px solid #ccc;border-bottom:1px solid #ccc;text-decoration:none;outline:0;}
.button div {text-align:center;background:url(http://studioad.ru/_fr/4/4461357.gif) repeat-x;background-position:bottom left;padding:3px 6px 4px 6px;margin-right:-2px;left:-1px;position:relative;z-index:999999;font:11px 'Arial';color:#666;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.button:hover {border-top:1px solid #8ac;border-bottom:1px solid #8ac;text-decoration:none;}
.button:hover div {background-position:bottom right;color:#568;border-left:1px solid #8ac;border-right:1px solid #8ac;}

Скачиваем архив с картинкой и загружаем ее в Файловый Менеджер сайта(именно с таким же названием)
Все кнопка установлена!
Вызывать эту кнопку будем таким кодом
Code
<a href='#' class='button'><div>Кнопка</div></a>

(ну я думаю что вы поняли что вместо # ссылка куда надо перейти при нажатии а вместо слова Кнопка ваша надпись)
Ну вот и все
Автор кнопки:Aleko


Последние темы на форуме:
 Почтовые акки с паролями
 Общение "часть 2 "
 Обмен регистрациями (Бесплатная раскрутка вашего сайта)
 Требуются Модераторы и Журналисты
 Оцените HD - кинотеатр



  • Добавил: GlebO_o
  • Просмотров : 1234
  • Загрузок : 314
  • Добавлено: 05.11.2019
  • Категория: Другие скрипты






Всего комментариев: 1
1 sibdes   (19.05.2012 05:49:50)
>( >( >( ну и где архив?

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