Красивая анимированная кнопка для вашего сайта. Главная
особенность этой кнопки, то что она растягивается по ширине в
зависимости от длины надписи на ней.
Для создания кнопки нам нужно 2
изображения:
(Чтобы скачать изображения кликните по нему правой кнопкой мыши и
выберите "Сохранить как...")
Установка:
1. Заходим в
панель управления
2. В админ-баре нажимаем "Дизайн" Затем
"Управление дизайном (CSS)"
3. В таблицу стилей вставляем этот код в
любое место и сохраняем
Код:
/*Красивая кнопка*/
a.button
{border:0px; background: transparent url('/buttons/button_a.png')
no-repeat scroll top right; color: #fff; display: block; float: left;
font: normal 11px tahoma, sans-serif; height: 26px; margin: 2px;
padding-right: 8px; /* sliding doors padding */ text-decoration: none;}
a.button span {border:none; background: transparent
url('/buttons/button_span.png') no-repeat; display: block; line-height:
23px; padding: 1px 0 2px 8px; vertical-align:middle; color: #fff;}
a.button:hover { outline: none; background-position: 100% -26px; color:
#fff; text-decoration: none;}
a.button:hover span {
background-position: 0% -26px; color: #fff;}
a.button:active {
outline: none; background-position: 100% -52px; text-decoration: none;}
a.button:active span { background-position: 0% -52px; color: #fff;}
/*===============*/
4.
Создаём в корне сайта папку "buttons" закачиваем в неё изображения,
которые вы скачали выше.
5. Открываем нужный шаблон и в то место
где нужна кнопка вставляем этот код и сохраняем.
Код:
<a class="button"
href="#"><span>Кнопка</span></a>
6. Любуемся результатом.
Красивые кнопки - 14 Мая 2010 - Скрипты для uCoz - Soft-kras portal
