Главная Аккаунт Файлы Ссылки Форум Графика
Разделы

Главное меню


21.2.08 19:25 | Код для круглой кнопки (ролловер) с GIF-анимацией
Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 0.00 (0) Оценить | Хитов 11217
Это код CSS для небольшой кнопки, текст на ней не уместится, поэтому я расположил его справа от изображения. Вы можете поставить его в любом месте, только немного подредактировать код. Здесь при наведении используется анимированный gif, который только один раз проигрывает анимацию. Можно сделать и постоянную анимацию, это кто как хочет. Также вместо гифа можно обычную картинку поставить.
Внизу вы увидите пример этой кнопки


.knopka_2{
display: block;
background-image: url(images/f_1.gif);  /*путь к неактивной кнопке*/
width: 28px;
height: 28px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: black;         /*цвет шрифта неактивной кнопки*/
font-weight: bold;
font-size:12px;
text-decoration: none;
padding-left: 30px;
line-height: 28px;
background-repeat: no-repeat
}
a.knopka_2:hover{
display: block;
background-image: url(images/f.gif);   /*путь к анимированному gif */
width: 28px;
height: 28px;
background-position:;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: red;          /*цвет шрифта при наведении*/
font-weight: bold;
font-size: 12px;
text-decoration: none;
padding-left: 30px;
padding-top: px;
line-height: 28px;
background-repeat: no-repeat
}

ссылка такого вида

<a href="" class="knopka_2">Cкачать</a>

Пример:

Скачать


 

Родственные ссылки
» Другие статьи раздела Коды CSS и HTML
» Эта статья от пользователя upet

5 cамых читаемых статей из раздела Коды CSS и HTML:
» Ролловер (перекат) или смена картинки при наведении курсора
» Простейший шаблон HTML
» Код для кнопки (ролловер с одним изображением) с примерами
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Код для топ-меню

5 последних статей раздела Коды CSS и HTML:
» Меню вертикальное (код)
» Код для топ-меню
» Код (ролловер) для сдвоенной кнопки с 4 изображениями в одном файле
» Код для круглой кнопки (ролловер) с GIF-анимацией
» Код для кнопки (ролловер с одним изображением) с примерами

¤ Перевести статью в страницу для печати
¤ Послать эту cтатью другу

MyArticles 0.6 beta for RUNCMS: by RunCms.ru


Можно и сюда


Cчётчики
Rambler's Top100 Рейтинг@Mail.ru