Пример кнопки с ролловером 1 в CSS

Ролловер 1 CSS
В этом примере у нас должно быть 3 изображения, которые будут работать как;
Отдыхать

На

Удерживается

Тогда в теле нашего сайта у нас есть это
Код:


НАЧАЛО

Итак, для всех наших кнопок, после того как нам придется использовать CSS, мы начнем с этого кода:
Код:

# bot1 {
граница: 0 0 0 0;
отступ: 0;
выравнивание текста: центр;
}
Когда мы говорим, что не хотим внешнего и внутреннего полей, мы выравниваем текст по центру, теперь мы продолжаем этот код:
Код:

# bot1 в {
фоновое изображение: url (bg_menu_1.jpg);
background-position: по центру вверху;
высота: 30 пикселей;
ширина: 100 пикселей;
дисплей: блок;
цвет: # 990000;
текстовое оформление: нет;
padding-top: 5 пикселей;
фон-повтор: без повторения;
font-weight: жирный;
}
Что он практически все делает, давайте посмотрим построчно
фоновое изображение: url (bg_menu_1.jpg);
При этом мы говорим, что хотим фоновое изображение, и указываем путь к этому
background-position: по центру вверху;
Этим мы указываем, что положение фонового изображения будет по центру и вверх.

фон-повтор: без повторения;
Чтобы фон не повторялся, как если бы это был узор.
высота: 30 пикселей;
ширина: 100;
Мы сообщаем вам, что высота будет 30, а ширина 100 пикселей, что соответствует размерам наших фоновых изображений.
дисплей: блок;
Чтобы он генерировал и уважал коробку с мерами, которые мы поставили ранее.
цвет: # 990000
При этом мы придаем цвет только тексту внутри нашего поля.
текстовое оформление: нет;
Это делается для того, чтобы избежать строки, которая находится под ссылками.
padding-top: 5 пикселей;
Так что я сэкономил пространство 5 пикселей в верхней части нашей ссылки и тем самым опустил позицию до центра нашего поля.
font-weight: жирный;
Делает буквы жирными
Затем вам просто нужно добавить классы для псевдоэлементов «hover» и «focus».
Код:

# bot1 a: hover {
фоновое изображение: url (bg_menu_2.jpg);
}
# bot1 to: focus {
фоновое изображение: url (bg_menu_3.jpg);
}
Но, как мы понимаем, мы изменили путь фоновых изображений только для достижения желаемого эффекта.
Код нашего пример опрокидывания в css показано ниже:
Код:








НАЧАЛО


И изображения можно загрузить с этой страницы, щелкнув изображение правой кнопкой мыши и сохранив как.