Kun lisäät painikkeen verkkosivulle, suosittelemme käyttämään CSS:ää sen tyylin luomiseen. CSS:n käyttäminen on suositeltu menetelmä, sillä se on tehokkaampi ja järjestelmällisempi tapa tallentaa tyylikoodia uudelleen käytettäväksi useammalle kuin yhdelle sivusi tai sivustosi alueelle. Kuten alla olevasta esimerkistä näet, monet attribuutit voivat muokata kutakin painiketyyppiä.
CSS-teksti painikkeiden muotoiluun
<style type="text/css">
#submit {
background-color: #bbb;
padding: .5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
border: none;
}
#submit:hover {
border: none;
background: orange;
box-shadow: 0px 0px 1px #777;
}
</style>
HTML-koodi painikkeen luomiseen
Kun CSS on lisätty sivulle, CSS:ää voidaan käyttää mihin tahansa painikkeeseen käyttämällä HTML-koodin id=”submit”-koodia.
<button id="submit">Example Button</button>
Esimerkki CSS:n luomasta painikkeesta
Yllä olevasta esimerkistä näet, että kun hiiri ei ole painikkeen päällä, painikkeessa on vaaleanharmaa tausta ja valkoinen teksti. Kun hiiri on painikkeen päällä, tausta muuttuu oranssiksi. Lisäksi painikkeen kulmat on pyöristetty neliön sijaan, kuten vakiomuotoisessa painikkeessa.
