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

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

На

Утримано

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


ПОЧАТОК

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

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

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

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

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








ПОЧАТОК


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