Button css

Normál gombra a böngészőben, az alábbiak szerint:

kód HTML gomb

És a megjelenése a gomb nem csak attól függ a felhasználó böngészőjének, hanem a „téma” az asztalon. Például, mivel a gomb úgy néz ki, a legnépszerűbb böngésző (IE, Mozilla és az Opera -kal) Windows XP szabványos stílus

És meg kell nézni, ha a felhasználó szívesebben használja a „klasszikus stílusú” az asztalon

És persze, a gomb lehet változtatni az alkalmazás néhány más egyéni stílusa, például

Tehát a gombokat a helyszínen, hogy ugyanúgy néz ki minden felhasználó számára, anélkül, hogy veszélyeztetné a tervezett kialakítás, a legegyszerűbb módja annak, hogy meghatározza azok megjelenését CSS segítségével.

Hagyja előírják a CSS paraméter, mint tag

Most a gombot, az összes felhasználó számára az alábbiak szerint alakul

kód beállításokat lehet megváltoztatni széles határok között, például, hogy a hangerő gomb, változtassuk a paramétereket a keret gombok, cserélje

kód CSS border: szilárd 1px # 73C8F0;

Ilyen paraméterek

kód CSS border: Előzetesen 2px # 73C8F0;

És a gomb fog kinézni

Most zaymomsya komolyabb „dekoráció” gomb megnyomásával. Lehetőségek alkalmazását biztosítja CSS3. ami érthető minden modern böngészőben. Ugyanakkor azok, akik isplzuetsya böngészők még nem alkalmazkodott a CSS3, egyszerűen nem jelenik meg néhány hatását, hogy mivel nem befolyásolja a munkáját egy gombot, mert az összes „dekoráció” vannak amellett, hogy a külső gombok jelentette.

Például, a sokféleség, és hogy mi a kód is unevirsalnym hozzunk létre néhány osztály, például .blue és felírni neki mindegy, hogy mi írt

az első kiviteli alakban.

Most, a CSS kód nézne ki

Mik az osztályok? Például a honlapon van két típusú gombok létrehozott különböző címkék

és és szeretné, hogy az egyik esetben a gombnak egy formanyomtatványt (az alapértelmezett böngésző által meghatározott), míg a másik esetben, jelenik szánt az Ön által, vagy szeretne létrehozni gombok különböző színű, vagy valami más. Itt majd a megfelelő helyen csak lepecsételt „osztály”, és ebben az esetben a gomb fog kinézni, ahogy tervezte.

Például hozzunk létre két gomb, és egy esetben adja osztály, de máshol nem. Az érthetőség kedvéért, van egy gomb, hogy a munkahelyen

kód HTML / * gomb megadása nélkül az osztály * /

/ * Gomb Az osztály jelzése * /

Lekerekített sarkok a gombra, akkor adjunk hozzá egy stíluslap az alábbi kódot:

kód CSS border-radius: 5px; -moz átnyúló-sugár: 5px; -webkit átnyúló-sugár: 5px;

Azt is hozzá gradiens:

kód CSS háttér: -moz-lineáris-gradiens (0% 100% 90deg, # 2E8CE3, # 73C2FD); háttér: -webkit-gradiens (lineáris, 0% 0% 0% 100%, a (# 73C2FD), a (# 2E8CE3));

Ez teljesen kód most így néz ki:

Ahhoz, hogy a hangerő gomb felvehet egy belső árnyék, hozzáadásával fehér csíkos felső része:

kód CSS box-shadow: süllyesztett 1px 0 0 0 #FFFFFF; -moz-box-shadow: süllyesztett 0 0 1 képpont 0 # FFFFFF; -webkit-box-shadow: süllyesztett 0 0 1 képpont 0 # FFFFFF;

A szemben az alsó széle a keret teszi sötétebb:

kód CSS border-bottom-color: # 196ebb;

Csak adj egy árnyék a szöveg, hogy majd a gomb kifejezőbb:

kód CSS text-shadow: 0 -1px 0 # 196ebb;

Mint látható, egy csomó lehetőséget, akkor a kísérlet paramétere. Például hozzunk létre egy áttetsző árnyék körül a gombot. Ahhoz, hogy ezt elérjük, cserélje

kód CSS -moz-box-shadow: süllyesztett 0 0 1 képpont 0 # FFFFFF; -webkit-box-shadow: süllyesztett 0 0 1 képpont 0 # FFFFFF; border-bottom-color: # 196EBB; text-shadow: 0 -1px 0 # 196EBB;

Ilyen paraméterek

kód CSS -moz-box-shadow: 0 1px 3px RGBA (0,0,0,0.5); -webkit-box-árnyék: 0 1px 3px RGBA (0,0,0,0.5); border-bottom: 1px szilárd RGBA (0,0,0,0.25); text-árnyék: 0 -1px 1px RGBA (0,0,0,0.25);

És így, az összehasonlítás, hogy az utóbbi lehetőség, a gomb fog kinézni a böngészőben

A még jobb hatás, adjunk hozzá egy jó lehetőség, hogy módosítsa a megjelenését a gombot, ha lebeg a kurzort, valamint a gomb megnyomásával. Ezt használja a pszeudo osztály: hover és: aktív

Add pszeudo osztály: hover gombot az első kiviteli alak, vagyis címkézni

változtatni a színét a gombra, ha mozgatni a kurzort rajta. A táblázatstílusokat fog tenni a felvételt.

Használata pseudo osztály: aktív hozzon létre egy kattintás hatása, például a használt kód, ha az egeret hozzá sötét árnyék a bal felső és a belső részét a gomb, valamint kiszorítja a szöveget jobbra és lefelé:

Azaz, a végleges változat a CSS a gomb kellene kinéznie (egy változatot mutat be az utóbbi típusú gomb)