Prilikom dodavanja gumba na web-stranicu, preporučuje se da koristite CSS da biste stvorili njegov stil. Korištenje CSS-a je preferirana metoda jer je učinkovitiji i organiziraniji način pohranjivanja koda stila za ponovnu upotrebu u više od jednog područja na vašoj stranici ili web-lokaciji. Kao što možete vidjeti na donjem primjeru, mnogi se atributi mogu koristiti za manipuliranje tipom svakog gumba.

CSS tekst za oblikovanje gumba

#submit {background-color: #bbb; padding: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; rubni polumjer: 6px; boja: #fff; obitelj fonta: 'Oswald'; veličina fonta: 20px; tekst-dekoracija: nema; granica: nema; } #submit: hover {border: none; pozadina: narančasta; kutija-sjena: 0px 0px 1px # 777; }

HTML kôd za izradu gumba

Nakon što je CSS dodan na stranicu, CSS se može primijeniti na bilo koji gumb pomoću koda u HTML-u.

Primjer gumba

Primjer gumba koji je stvorio CSS

Iz navedenog primjera može se vidjeti da kada miš ne lebdi iznad gumba, gumb ima svijetlo sivu pozadinu i bijeli tekst. Kada miš lebdi iznad gumba, pozadina se mijenja u narančastu. Isto tako, kutovi gumba zaokruženi su umjesto kvadratića, poput standardnog gumba za obrazac.