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

Главное меню


11.2.08 10:44 | Код для кнопки (ролловер с одним изображением) с примерами
Раздел: Коды CSS и HTML | Автор: upet | Рейтинг: 10.00 (1) Оценить | Хитов 12584
Иногда не хочется заморачиваться с лишними скриптами, кодами, да и с картинками для создания кнопки с перекатом (ролловером).
Ведь для ролловера нужно как минимум 2 картинки (2 разных изображения).
С помощью CSS можно сделать небольшой оптический обман, при котором будет заметен эффект нажатия кнопки.
Приведённый ниже код нужно вставить или между тэгами или в ваш файл, например: style.css
Эффект заключается в небольшом смещении фона т.е. картинки на 1 пиксель вниз и вправо.
Если у вас кнопки с другими размерами, поменяйте ширину и высоту в коде, ниже всё подписано.


/* CSS Document */
.knopka_1{
display: block;
background-image: url(images/knopka11.gif);     /*Это путь к картинке*/
width: 107px;    /*ширина*/
height: 32px;   /*высота*/
font-family:Verdana, Arial, Helvetica, sans-serif;    /*Шрифты можно изменить*/
text-align: left;
color: white;     /*цвет текста*/
font-weight: bold;
font-size:12px;
text-decoration: none;
line-height: 32px;  /*высота*/
}
a.knopka_1:hover{
display: block;
background-image: url(images/knopka11.gif);     /*Это путь к той же картинке*/
width: 107px;   /*ширина*/
height: 31px;   /*высота*/
background-position: 1px 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;     /*Шрифты можно изменить*/
text-align: left;
color: white;    /*цвет текста при наведении*/
font-weight: bold;
font-size: 12px;
text-decoration: none;
padding-left: 1px;
padding-top: 1px;
line-height: 31px;  /*высота*/
background-repeat: no-repeat
}


В коде HTML вам нужна ссылка вот такого вида

<a href="" class="knopka_1">&nbsp;&nbsp;Ссылка</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