Када додајете дугме веб страници, препоручује се да користите ЦСС да бисте креирали његов стил. Коришћење ЦСС-а је пожељан метод јер је ефикаснији и организованији начин складиштења кода стила за поновну употребу у више од једне области на вашој страници или локацији. Као што можете видети у доњем примеру, многи атрибути се могу користити за манипулацију са сваким типом тастера.

ЦСС текст за обликовање дугмади

#субмит {бацкгроунд-цолор: #ббб; паддинг: .5ем; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; радијус: 6пк; цолор: #ффф; фонт-фамили: 'Освалд'; фонт-сизе: 20пк; тект-децоратион: ноне; граница: ниједна; } #субмит: ховер {бордер: ноне; позадина: наранџаста; бок-схадов: 0пк 0пк 1пк # 777; }

ХТМЛ код за креирање дугмета

Након што се ЦСС дода на страницу, ЦСС се може применити на било које дугме помоћу кода у ХТМЛ-у.

Пример Буттон

Пример дугмета креираног од стране ЦСС-а

Из горе наведеног примера можете видети да када миш не лебди изнад дугмета, дугме има светло сиву позадину и бели текст. Када миш лебди изнад дугмета, позадина се мења у наранџасту. Такође, углови дугмета се заокружују уместо квадрата, као стандардни дугме за форму.