Egyéni submit gombok CSS3-mal, árnyékolás

Múltkor egyéni menüsort készítettünk, most egy űrlap gombját fogjuk egyedivé tenni. Ha weboldalt készítünk, általában látványterv alapján készítjük el a sitebuildet, de nem kell mindig képet tenni az egyes elemek mögé, mert ez is lassítja az oldal megjelenését.

Először is létrehozunk html-ben egy űrlapot, hogy legyen mit megformáznunk:

<form method="post" action="valami.php">
            <label>Név: </label><input type="text" size="40" name="nev"><br />
            <label>Üzenet: </label><textarea rows="5" cols="40"></textarea><br />
            <input type="submit" name="submit" id="button" value="Küldés">
</form>

CSS3-ban a formázást egyszerűen meg tudjuk adni űrlapok esetében. Általánosítva, ha nem használunk id-t, vagy class-t, így néz ki: input[type="submit"]. Ekkor az input elemek submit típusára adjuk meg a formázást.
A gombunk lekerekített lesz, ezt már ismerjük: border-radius-szal adható meg.
Hátterének adhatunk színátmenetet, vagy 1 színből is állhat (jelen esetben átmenetes lesz). A betű színe is megadható, félkövérítjük, hogy jobban olvasható legyen.
A dizájn során a grafikusok szeretik túl effektelni ezeket a részeket, így lett újabb trend során általános használat az árnyékolás, akár a teljes doboz köré, vagy csak a betű köré. Alap állás szerint először csak a gomb köré rakunk árnyékot, amit box-shadow-val tudunk megtenni. Ennél összesen 8 értéket tudunk megadni:

• horizontális eltávolodás
• vertikális eltávolodás
• elhalványodás
• spread, mely az árnyék nagyságát adja meg
• RGB-ben a 3 szín megadás
• átlátszóság, melynek értéke 0.1 és 1 közötti

Most a formázás összességében így néz ki:

 input[type="submit"]{
                border:none;
                background: #bfd255; /* Old browsers */
                background: -moz-linear-gradient(top,  #bfd255 0%, #8eb92a 41%, #72aa00 57%, #9ecb2d 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(41%,#8eb92a), color-stop(57%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #bfd255 0%,#8eb92a 41%,#72aa00 57%,#9ecb2d 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
                width:120px;
                height:25px;
                color:#FFFFFF;
                font-weight:bold;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                margin:5px 0;
                -webkit-box-shadow:  1px 1px 2px 2px rgba(40, 140, 40, 1);
                box-shadow:  1px 1px 2px 2px rgba(40, 140, 40, 1);
            }

A hover eseménynél a formázást módosítjuk és itt is alkalmazzuk a transitionst, hogy effektesebb legyen, ezzel a felhasználó számára élvezhetőbbé tehetjük az oldalt. Itt a szövegnek adunk árnyékot, melyet a text-shadow-val tudunk megtenni. Itt a következő értékeket kell megadni:

• horizontális távolság
• vertikális távolság
• blur-radius, ami a szín erősségét jelöli
• árnyék színe itt hexadecimáls formában

Ennek a css kódja a következő:

input[type="submit"]:hover{
                -webkit-transition: all 500ms linear;
                -moz-transition: all 500ms linear;
                -ms-transition: all 500ms linear;
                -o-transition: all 500ms linear;
                transition: all 500ms linear;
                color:#75AC03;
                background:#BCD053;
                text-shadow: 2px 1px 3px #FFFFFF;
                filter: dropshadow(color=#FFFFFF, offx=2, offy=1);
               
            }

Végeredményben kaptunk egy egyedi gombot (jelen leírás a teljesség igénye nélkül készült), mely fölé az egeret húzva lassan megváltozik a háttere és színe, így nemcsak, hogy nem kell képet alkalmaznunk mindkét állapotában, hanem a tervezés során szabadabban alkothatjuk meg az ilyen elemeinket.