CSS Gumbi (ang. Buttons)

Gumbi so namenjeni za sprožitev dejanj in se ga največ uporablja v povezavi z JavaScript-om. Zato se bomo v CSS vadnici naučili vse, kako gumbe lahko obarvamo, tako ozadje kot besedilo. Primeri kažejo, kako se določi barve gumbov, obrobe okrog gumbov itn. Velikost gumba se prilagodi pisavi, in nam ni potrebno nastavljati velikosti, samo v takem primeru bodo velikosti različne. Gumbi na spletni strani nam lahko pomagajo v marsikateri izboljšavi spletne strani. Recimo, če želimo namesto <a href=""> uporabiti gumb, moramo dodati JavaScript funkcijo:

<p onclick="document.location.href='URL'">CSS vadnica se odpre v istem oknu oziroma zavihku.</p>
<p onclick="window.open('URL')">CSS vadnica se odpre v novem oknu.</p>

Veliko več primerov povezanih z gumbi, bomo našli v JavaScript vadnici, ko bomo spoznali onclick funkcijo.

Barve gumbov	Gumbu bomo spremenili barvo ozadja.	Glej primer
Gumb na sliki	Postavitev gumba na sredino slike	Glej primer
Lebdeči (hover) gumbi	Za spremembo sloga gumba, ko se nanj pomaknemo z miškinim kazalcem uporabimo izbirnik hover.	Glej primer
Navpična skupina gumbov	Gumbe združimo drug pod drugim z lastnostjo display: block.	Glej primer
Obrobe gumbov	Lastnost border gumbo doda obrobo.	Glej primer
Onemogočen gumb	Lastnost opacity skrbi, da gumbu dodamo prosojnost.	Glej primer
Osnovno oblikovanje gumbov	Naučimo se oblikovati gumbe s CSS.	Glej primer
Senčenje gumbov	Za dodajanje senc gumbu, bomo uporabili lastnost box-shadow.	Glej primer
Širina gumba	Če želimo gumb povečati, uporabimo lastnost width.	Glej primer
Skupina obrobljenih gumbov	Z lastnostjo border ustvarimo skupino obrobljenih gumbov.	Glej primer
Skupine gumbov	Odstranimo robove in vsakemu gumbu dodajmo float:left, da ustvarimo skupino.	Glej primer
Velikosti gumbov	Za velikosti gumbov bomo uporabili lastnost font-size.	Glej primer
Zaobljeni gumbi	Lastnost border-radius, da gumbu dodamo zaobljene vogale.	Glej primer