Красивая анимированая кнопка для ucoz - 30 Мая 2010

Меню сайта

Категории раздела

Скрипты для uCoz [261]

Шаблоны для uCoz [57]

Шаблоны для форума [12]

Графика для uCoz [71]

Мини-чат

Наш опрос

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Форма входа

Главная » » Красивая анимированая кнопка для ucoz

16:35

Красивая анимированая кнопка для ucoz

Красивая анимированая кнопка для ucoz - Главная особенность этой кнопки, то что она растягивается по ширине в зависимости от длины надписи на ней.

Для создания кнопки нам нужно 2 изображения:

(Чтобы скачать изображения кликните по нему правой кнопкой мыши и выберите "Сохранить как...")

Установка:
Данный код ставим в конец вашего CSS:

Code

/*Красивая кнопка*/
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" закачиваем в неё наши 2 изображения, которые вы скачали выше.
5. Открываем нужный шаблон и в то место где нужна кнопка вставляем этот код и сохраняем:

Code

<a class="button" href="#"><span>Кнопка</span></a>

Всё!

Категория: Скрипты для uCoz | Просмотров: 552 | Добавил: ErIcSSon | Теги: Кнопка, анимированая, красивая, Ucoz, для | Рейтинг: 0.0/0

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

Поиск

Календарь

Друзья сайта

Мой сайт