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

14. helmikuuta 2022

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.

Youtube Embed Poster: C0fzIsZA2r8


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ä:

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

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ä:

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

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

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

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.

Ota yhteyttä:

Asiakastukitiimimme on tavoitettavissa ympäri vuorokauden ja keskimääräinen vastausaika on yhdestä kahteen tuntia.
Tiimiimme voi ottaa yhteyttä:

Tukifoorumi: https://www.jotform.com/answers/

Ota yhteyttä Jotformin tukitiimiin: https://www.jotform.com/contact/

Lähetä viesti:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Podo Comment Ole ensimmäinen kommentoija.