Înlocuirea butonul de trimitere în formă de html
obiectiv:
Astăzi, sarcina noastră înlocuiește standardul „Send“ buton de pe frumoasa. Butonul este responsabil pentru trimiterea formularului și are tipul «prezinte». Bineînțeles, Puteți schimba tipul «să prezinte» în «imaginea» și adăugați parametrul «src», dar sarcina noastră de astăzi este de a părăsi tipul «prezinte» pe site-ul și software-ul pentru a desena un buton frumos.
De ce ai vrea? Pur și simplu, din motive estetice care același buton.
Aici pentru comparație. Se vede clar că al doilea buton arata mai bine.
soluţie:
Pentru a îndeplini acest scop, așa cum sa menționat, vom folosi «intrare» de tip «submit». Mai mult, avem nevoie pentru a defini o nouă clasă în tabelul «* .css» stil
Aici este codul pentru HTML-fișier:
latime superbutton: 150px;
înălțime: 40px;
border-radius: 20px;
fundal: # 459DE5;
Culoare: #fff;
font-size: 18px;
cursor: pointer;
>
decora:
Pentru a decora, va poate oferi pentru a schimba culoarea de fundal a unui buton atunci când vă deplasați. De obicei, designerii sunt sfătuiți să nu schimbe culoarea in mod dramatic, dar numai la un ton mai deschis sau mai întunecat. Prefer atunci când efectuează butonul dim sarcini. Pentru a face acest lucru, se adaugă css:
Butonul Acum reînviat. Pe o diferență de culoare imagine statică nu este atât de vizibil atunci când vă și mouse-uri de culoare a doua schimbare mai strict aplicarea nuanței mai închise.
Problema marginii din jurul butonului:
Si totul pare ca nimic și nimic nu la determinat întuneric, dar atunci când este apăsat, vom vedea cadrul teribil. Mai mult acest cadru poate fi observată atunci când butonul nostru este focalizat, care se află pe iterează cheie Tab prin elementele de pe pagină.
Pentru a face acest lucru, ne prescrie în 2 mai css clasa pseudo ca «Hover». Această clasă «activă», care este responsabil pentru forma atunci când apăsați butonul, și clasa de «focus» cu accent pe butonul. Dar există o caracteristică, așa cum avem de intrare și atribuite clasei, nu este neapărat să prescrie activă.
Aici este codul: