Miten mukauttaa Lähetä-painiketta CSS:n avulla

PÄIVITETTY: Tutustu Form Designer videokurssiin ja opi miten luoda tyylikkäitä Lähetä-painikkeita!

Tiesitkö että vihreä ja sininen ovat värejä jotka auttavat rentoutumaan? Tämän vuoksi värit ovat kaikkein käytetympiä useimmilla suosituilla nettisivuilla, ja värit auttavat käyttäjiä tuntemaan olonsa kotoisaksi. Lähetä-painikkeet nettilomakkeilla tuntuvat myös luotettavammilta, mikä on tärkeää käyttäjien jakaessa tietojaan.

Tässä oppaassa käymme läpi miten Lähetä-painikkeen ulkoasua voi muokata, jotta se sopii yhtenäisesti lomakkeen teemaasi.

CSS-koodin lisääminen

Klikkaa Form Designer -kuvaketta ja avaa Tyylit -välilehti. Kopioi ja liitä seuraava CSS-koodi mukautetulle CSS-koodille tarkoitettuun kenttään:

.form-submit-button {
     background:#0066A2;
     color:white;
     border-style:outset;
     border-color:#0066A2;
     height:50px;
     width:100px;
     font:bold15px arial,sans-serif;
     text-shadow:none;
}

Painikkeen tulisi näyttää koodin avulla tältä:

Lähetä-painikkeen CSS-koodin yksityiskohdat

• .form-submit-button – Lähetä-painikkeen valinta-osuus.
• background – Painikkeen taustaväri.
• color – Tekstin väri.
• border-style – Painikkeen reunan tyyli.
• border-color – Painikkeen reunan väri.
• height – Korkeus pikseleinä.
• width – Leveys pikseleinä.
• font – Fontti.

Huom: Ethän unohda puolipilkun (;) käyttöä jokaisen lausekkeen jälkeen.

Lähetä-painike ja CSS3 & Hover

Voit käyttää yllä olevia attribuutteja painikkeen muokkaamiseen. Koodissa on vain pieniä muutoksia.
Esimerkki CSS3 painikkeesta:
.form-submit-button {
     background:#B9DFFF;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}
.form-submit-button:hover {
     background:#016ABC;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}

Painike näyttää tältä:

Ja viedessä hiiri päälle tältä:

CSS3 yksityiskohdat

• .form-submit-button:hover –Tämä luokka määrittää miltä painike näyttää kun hiiri viedään painikkeen päälle.
• border-radius – Painikkeen kulmien pyöreys.
• box-shadow – Painikkeen varjo.
• text-shadow – Tekstin varjo.

Oliko oppaasta hyötyä? Jaa mielipiteesi ja kommenttisi alla.