Hogyan rendezzük gomb formájában input css gombot, Szergej Kalugin

Home »Hírek» Hogyan rendezzük gomb formájában input css gomb

Hogyan készítsünk egy linket formájában egy gomb, írtam az előző hozzászólásokat. Lettem kell hívni a gomb alakú (html tag ) Használata nélkül grafika.

buttonSend background-color: átlátszó;
background-image: url ( "button.png");
background-position: center center;
background-repeat: no-repeat;
átnyúló: 0 nincs átlátszó;
szín: #FFFFFF;
magasság: 54px;
padding: 2px;
szélesség: 145px;
>

Ez az, amit tettem.

Hogyan csináljuk:
Tekintettel arra, hogy a helyszínen épül a CMS SiteEdit, a gombok a rendszerben Class css buttonSend

1. Létre kell hozni egy css osztályt a gombokat:
.buttonSend háttér: -moz-lineáris-gradiens (. center top # 5A7994, # 394D63) ismételje görgető 0 0 átlátszó;
border: 1px szilárd # 394D63;
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-árnyék: 0 1px 2px RGBA (0, 0, 0, 0,2);
color: # D9EEF7;
kurzor: pointer;
display: inline-block;
font: 14px / 100% Arial, Helvetica, talpatlan;
margin: 0 2px;
vázlat: közepes nincs;
padding: 0.5em 2em 0.55em;
text-align: center;
text-decoration: none;
text-árnyék: 0 1px 1px RGBA (0, 0, 0, 0,3);
függőleges-align: alapvonal;
>

Nézzük meg, hogy ezt a kódot.
Létrehozza a háttér színátmenet alapértelmezés gomb:
háttér: -moz-lineáris-gradiens (center top # 5A7994, # 394D63.) ismételje görgető 0 0 átlátszó;
Állítsa be a vastagsága, típusát és színét a gomb határ:
border: 1px szilárd # 394D63;
A sugár gomb határ:
border-radius: 0.5em 0.5em 0.5em 0.5em;
Állítsa be a színárnyalatot a gomb:
box-árnyék: 0 1px 2px RGBA (0, 0, 0, 0,2);
Állítsa font color:
color: # D9EEF7;
Vigyük a kurzort típus - tenyér a mutatóujjával:
kurzor: pointer;
Konopka típusú készülék a sorban:
display: inline-block;
A font a gombok - méret és fejhallgató:
font: 14px / 100% Arial, Helvetica, talpatlan;
Otsupy között a gombot és a környező elemek:
margin: 0 2px;
Állítsa be a szín, stílus és vastagsága a külső határ mind a négy oldalán az elem. Ezzel szemben a vonal által meghatározott határ, vázlat ingatlan nem befolyásolja a helyzet a blokk és a szélessége:
vázlat: közepes nincs;
Állítsa be a belső párnázás a gomb határt a szöveg:
padding: 0.5em 2em 0.55em;
Állítsa be a vízszintbeállításán gomb szövege:
text-align: center;
Létrehozza az eltörlése a táj, a szöveg:
text-decoration: none;
Mi meg árnyék a szöveget:
text-árnyék: 0 1px 1px RGBA (0, 0, 0, 0,3);
Állítsa be a függőleges igazítás a szöveg:
függőleges-align: alapvonal;

Most létre kell hoznunk a hatást navednii egérgombbal. Tegyük a színátmenet egy kicsit könnyebb:
.buttonSend: lebeg háttér: -moz-lineáris-gradiens (center top # 718DA8, # 48627D.) ismételje görgető 0 0 átlátszó;
text-decoration: none;
>

Végül, hozz létre egy szabályt a regisztrációs gomb megnyomása nem igaz - perevernom gradiens, változtatni a színét a szöveget, és becslése szerint 1 pixel:
.buttonSend: aktív háttér: -moz-lineáris-gradiens (center top # 394D63, # 5A7994.) ismételje görgető 0 0 átlátszó;
color: # 80BED6;
helyzet: a relatív;
top: 1px;
>

Általában, ez minden.

Hogy szép és eladni a honlapon!