Бутон в CSS

Standard бутон в браузъра си, както следва:

код HTML бутон

И появата на бутона няма да зависи само от браузъра на потребителя, но и върху "теми" на работния плот. Например, тъй като бутона изглежда в най-популярните браузъри (IE, Mozilla и Opera съответно) в Windows XP стил стандарт

И тя ще трябва да се търси, ако потребителят предпочита да използва "класически стил" за вашия работен плот

И разбира се, на бутона може да се промени при прилагането на друга потребителска стил, като например

Така че бутоните на вашия сайт, за да изглежда по същия начин за всички потребители, без да се нарушава планираната дизайн, най-лесният начин да определите външния си вид с помощта на CSS.

Нека да предпише в CSS параметри като маркер

Сега бутона, всички потребители ще бъдат, както следва

настройки код може да бъде променен в широки граници, например, да се направи бутона за силата на звука, да се променят параметрите на бутоните на рамката, сменете

код CSS граница: 1px твърдо # 73C8F0;

На такива параметри

код CSS граница: 2px начало # 73C8F0;

И бутона ще изглежда така

Сега нека zaymomsya по-сериозно "украса" на бутона. Възможности осигурява използването на CSS3. който се разбира от всички модерни браузъри. На същите, които isplzuetsya браузъри все още не са адаптирани към на CSS3, просто няма да покаже някои от ефектите на това да не се отразява на работата на един бутон, тъй като всички "украсата" са в допълнение към външните бутони, предназначени.

Например, разнообразие, и да направим нашата код повече unevirsalnym, нека създадем някакъв клас, например .blue и предписва за него е все едно, че сме писали за

в първото изпълнение.

Сега, нашата CSS код ще изглежда така

Какви са часовете? Така например на уебсайта си, че има два вида бутони, създадени с различни маркери

и и искате, че в един случай, бутонът има стандартен формуляр (браузърът по подразбиране е определено), а в друг случай, показани по предназначение от вас, или искате да създадете бутони с различни цветове, или нещо друго. Ето най-после, на правилното място просто подпечатва "класа" и в този случай, бутонът ще изглежда така, както сте планирали.

Например, нека създадем два бутона, а в един случай, уточни клас, но не и в други. За по-голяма яснота, имам едно копче, което на работното място

код HTML / * бутон без да се уточнява клас * /

/ * Бутон с означението на класа * /

Заоблени ъгли на бутона, можете да добавите в стилове следния код:

код CSS граничен радиус: 5px; -moz гранично-радиус: 5px; -webkit гранично-радиус: 5px;

Можете да добавите и градиент:

код CSS фон: -moz-линеен градиент (0% 100% 90deg, # 2E8CE3, # 73C2FD); фон: -webkit-градиент (линейна, 0% 0% 0% 100%, от (# 73C2FD) до (# 2E8CE3));

Това е напълно код ще изглежда така:

За да направите бутона обем можете да добавите вътрешна сянка, чрез добавяне на бели ивици в горната част от нея:

код CSS кутия сянка: добавям 1 пиксел 0 0 0 #FFFFFF; -moz кутия-сянка: добавям 0 0 0 1 пиксел # FFFFFF; -webkit кутия-сянка: добавям 0 0 0 1 пиксел # FFFFFF;

А за разлика от долния край на рамката направи по-тъмен:

код CSS граничен отдолу-цвят: # 196ebb;

Просто добавете сянка за текста, който ще направи бутона по-изразителен:

код CSS текст сянка: 0 -1px 0 # 196ebb;

Както можете да видите много опции, можете да експериментирате с всички параметри. Например, нека да се създаде прозрачна сянка около бутона. За да направите това, ние замени

код CSS -moz кутия-сянка: добавям 0 0 0 1 пиксел # FFFFFF; -webkit кутия-сянка: добавям 0 0 0 1 пиксел # FFFFFF; гранично-отдолу-цвят: # 196EBB; текстови сянка: 0 -1px 0 # 196EBB;

На такива параметри

код CSS -moz кутия-сянка: 0 1 пиксел 3px RGBA (0,0,0,0.5); -webkit кутия сянка: 0 1px 3px RGBA (0,0,0,0.5); граница дъно: 1px твърдо вещество RGBA (0,0,0,0.25); текстови сянка: 0 -1px 1px RGBA (0,0,0,0.25);

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

За още по-добър ефект, добавете една добра опция, за да промените външния вид на бутона, когато задържите курсора върху него, както и с натискане на бутона. Това се прави с помощта на класа псевдо: мишката и: активно

Добави псевдо клас: мишката бутон първото изпълнение, т.е. да маркирате

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

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

Това означава, че окончателният вариант на СГО за вашия бутон трябва да изглежда по следния начин (показва вариант на последния тип бутон)

---