Пример дугмета са преношењем 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.јпг);
}
Али како схватамо, само смо променили пут позадинских слика да бисмо постигли ефекат који смо тражили.
Код нашег пример превртања у цсс-у приказано испод:
Шифра:








ПОЧЕТАК


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