Пример за бутон с преобръщане 1 в CSS

Преобръщане 1 CSS
За този пример трябва да имаме 3 изображения, които ще работят като;
Упокой

На

Задържан

Тогава в тялото на нашия сайт имаме това
Код:


НАЧАЛО

И така за всички наши бутони, след като ще трябва да използваме CSS, започваме с този код:
Код:

# bot1 {
граница: 0 0 0 0;
подплата: 0;
подравняване на текст: център;
}
Когато казваме, че не искаме външен и вътрешен поле, ние подравняваме текста към центъра, сега продължаваме с този код:
Код:

# bot1 до {
фоново изображение: url (bg_menu_1.jpg);
позиция на фона: отгоре в центъра;
височина: 30px;
ширина: 100px;
дисплей: блок;
цвят: # 990000;
декорация на текст: няма;
подложка: 5px;
background-repeat: no-repeat;
шрифт-тегло: получер;
}
Че той на практика е този, който прави всичко, нека видим ред по ред
фоново изображение: url (bg_menu_1.jpg);
С това казваме, че искаме фоново изображение и даваме пътя на това
позиция на фона: отгоре в центъра;
С това ние показваме, че позицията на фоновото изображение ще бъде центрирана и нагоре.
background-repeat: no-repeat;

Така че фонът да не се повтаря, сякаш е шаблон.
височина: 30px;
ширина: 100;
Казваме ви, че височината ще бъде 30 и ширината 100px, което са размерите на нашите фонови изображения.
дисплей: блок;
За да генерира и зачита кутия с мерките, които сме поставили преди.
цвят: # 990000
С това ние само придаваме цвят на текста, който е вътре в нашата кутия.
декорация на текст: няма;
Избягвайте линията, която е под връзките.
подложка: 5px;
Така че спестявам място от 5px в горната част на нашата връзка и с това намалява позицията до центъра на нашата кутия.
шрифт-тегло: получер;
Прави буквите получер
След това просто трябва да добавите класове за псевдоелементите "hover" и "focus"
Код:

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








НАЧАЛО


И изображенията могат да бъдат изтеглени от тази страница, като щракнете с десния бутон върху изображението и запазите като.