Пример дугмета са преласком 1 у ЦСС

Ролловер 1 ЦСС
За овај пример морамо имати 3 слике које ће радити као;
Репосе

На

Одржан низ

Затим у телу нашег сајта имамо ово
код:


ПОЧЕТАК

И тако за сва наша дугмад, након што ћемо морати да користимо ЦСС, почињемо са овим кодом:
код:

# бот1 {
граница: 0 0 0 0;
паддинг: 0;
тект-алигн: центар;
}
Тамо где кажемо да не желимо спољну и унутрашњу маргину, поравнавамо текст са средиштем, сада настављамо са овим кодом:
код:

# бот1 до {
бацкгроунд-имаге: урл (бг_мену_1.јпг);
бацкгроунд-поситион: центар врх;
висина: 30пк;
ширина: 100пк;
дисплеј блок;
боја: # 990000;
текст-декорација: нема;
паддинг-топ: 5пк;
бацкгроунд-репеат: без понављања;
фонт-веигхт: болд;
}
Да је он практично тај који све ради, да видимо ред по ред
бацкгроунд-имаге: урл (бг_мену_1.јпг);
Овим кажемо да желимо позадинску слику и дајемо путању овога
бацкгроунд-поситион: центар врх;
Овим указујемо да ће позиција позадинске слике бити центрирана и навише.
бацкгроунд-репеат: без понављања;
Тако да се позадина не понавља као да је шаблон.
висина: 30пк;
ширина: 100;

Кажемо му да ће висина бити 30 и ширина 100 пиксела што су димензије наших позадинских слика.
дисплеј блок;
Тако да генерише и поштује кутију са мерама које смо претходно поставили.
боја: # 990000
Овим само дајемо боју тексту који се налази унутар наше кутије.
текст-декорација: нема;
То је да се избегне линија која је испод линкова.
паддинг-топ: 5пк;
Тако да сам сачувао простор од 5пк у горњем делу наше везе и тиме спустио позицију до центра нашег оквира.
фонт-веигхт: болд;
Подебљава слова
Онда само треба да додате класе за псеудо елементе "лебдећи" и "фокус"
код:

# бот1 а: ховер {
бацкгроунд-имаге: урл (бг_мену_2.јпг);
}
# бот1 за: фокус {
бацкгроунд-имаге: урл (бг_мену_3.јпг);
}
Али као што схватамо, само смо променили путању наших позадинских слика да бисмо постигли ефекат који смо тражили.
Код наше пример превртања у цсс-у приказано испод:
код:








ПОЧЕТАК


А слике се могу преузети са ове странице, десним кликом на слику и чувањем као.