Приклад кнопки з перекиданням 1 у CSS

Перекидання 1 CSS
Для цього прикладу ми повинні мати 3 зображення, які працюватимуть як;
Відпочинь

Увімкнено

Проведено

Тоді в тілі нашого сайту ми маємо це
Код:


ПОЧАТОК

І тому для всіх наших кнопок, після того як нам доведеться використовувати CSS, ми починаємо з цього коду:
Код:

# bot1 {
межа: 0 0 0 0;
заповнення: 0;
вирівнювання тексту: по центру;
}
Коли ми говоримо, що не хочемо зовнішнього та внутрішнього поля, ми вирівнюємо текст по центру, тепер ми продовжуємо з цим кодом:
Код:

# бот1 до {
фонове зображення: url (bg_menu_1.jpg);
фонове положення: центр зверху;
висота: 30px;
ширина: 100 пікселів;
дисплей: блок;
колір: # 990000;
оформлення тексту: жодного;
підкладка: 5 пікселів;
фонове повторення: не повторювати;
шрифт-шрифт: жирний;
}
Що він практично той, хто все робить, давайте подивимося рядок за рядком
фонове зображення: url (bg_menu_1.jpg);
Цим ми говоримо, що хочемо фонове зображення, і вказуємо шлях до цього
фонове положення: центр зверху;
Цим ми вказуємо, що положення фонового зображення буде відцентрованим і вгору.

фонове повторення: не повторювати;
Щоб фон не повторювався так, ніби це візерунок.
висота: 30px;
ширина: 100;
Ми говоримо йому, що висота буде 30, а ширина 100 пікселів, що є розмірами наших фонових зображень.
дисплей: блок;
Таким чином, він створює та поважає скриньку із заходами, які ми вживали раніше.
колір: # 990000
Завдяки цьому ми надаємо лише колір тексту, який знаходиться всередині нашого вікна.
оформлення тексту: жодного;
Це уникати рядка, який знаходиться нижче посилань.
підкладка: 5 пікселів;
Щоб заощадити 5px місця у верхній частині нашого посилання, а за допомогою цього опустіть позицію до центру нашої скриньки.
шрифт-шрифт: жирний;
Робить літери жирними
Тоді вам просто потрібно додати класи для псевдоелементів "наведення" та "фокус"
Код:

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








ПОЧАТОК


І зображення можна завантажити з цієї сторінки, клацнувши правою кнопкою миші на зображенні та збереживши як.