На данном примере рассмотрим создание простых динамических кнопок, которые могут найти широкое применение на любом сайте. Например, такие кнопки используются на нашем форуме (Кнопки "Профиль", "ЛС" и пр.). Допустим, у нас есть ссылка:
Code
<a href="/">Профиль</a>
Первым делом нужно добавить класс к данной ссылке, например "www"
Code
<a href="/" class="www">Профиль</a>
На этом работа с HTML закончена, переходим непосредственно к таблице стилей.
Необходимо в таблицу стилей добавить сей класс (www):
Теперь начнём придавать кнопке необходимый внешний вид, например такой:
Code
a.www {
background: #1f1f1f; /* цвет фона кнопки */
border: 1px solid #4f4f4f; /* размер (1px), тип (solid), и цвет (#4f4f4f) рамки */
color: #7fdf00; /* цвет текста внутри кнопки */
font: 11px Verdana; /* размер и тип шрифта */
margin: 2px; /* пространство (отступ) вокруг кнопки */
padding: 3px 5px; /* отступ от текста кнопки до рамки (ака размер кнопки) */
text-decoration: none; /* убирает подчеркивание для ссылки */
}
Добавлю, что background, color, font и text-decoration можно исключить, если их значение уже задано в CSS для родительских элементов.
следующий шаг - сделать стиль для кнопки, на которую будет наведён курсор мыши.
Вариант 1. Например, при наведении у кнопки будет меняться цвет фона и рамки:
Code
a.www:hover {
background: #373737; /* цвет фона кнопки */
border: 1px solid #7fdf00; /* размер (1px), тип (solid), и цвет (#7fdf00) рамки */
}
Вариант 2. При наведении будет меняться цвет фона и цвет букв:
Code
a.www:hover {
background: #7fdf00; /* цвет фона кнопки */
color: #1f1f1f; /* цвет текста внутри кнопки */
}
Вариант 3. Можно для кнопки использовать и фоновые изображения:
Code
a.www {
background: url('back.png'); /* фоновая картинка кнопки */
color: #7f7f7f; /* цвет текста внутри кнопки */
font: 11px Verdana; /* размер и тип шрифта */
margin: 2px; /* пространство (отступ) вокруг кнопки */
padding: 4px 6px; /* отступ от текста кнопки до рамки (ака размер кнопки) */
text-decoration: none; /* убирает подчеркивание для ссылки */
}
a.www:hover {
background: url('hover.png'); /* фоновая картинка кнопки при наведении */
color: #dfdfdf; /* цвет текста внутри кнопки при наведении */
}
Все три варианта в действии можно посмотреть здесь
