Gombok, CSS - példák

előző ◈ a következő

Van többféle bemeneti hogy hozzon létre egy gombot, és a címke gomb [type = „gomb | visszaállítás | submit”]. Úgy néz ki, és a funkciók azok feltétlenül azonosak.

Mikor kell használni a gombot tag?
  • gombnak egy nyitó és egy záró tag, és azt jelenti, hogy tartalmazhat gyermek címkék
  • ha a szöveg a gomb egy, az érték értéket kell továbbítani, ha rákattint egy másik.

Hogyan készítsünk egy gombot a CSS

Száműzetéséből, címke span vagy div teheti a CSS egy nagyon szép gombot.

Hozzon létre egy gombot, a „Mit kell változtatni a megjelenését egy gombot, ha mozog, vagy hogy egy gombnyomással hatása?”

Be kell vallanom, hogy a legnehezebb kitalálni, hogyan kell viselkedni alatt egy gombnyomással.

Néha a legegyszerűbb megjelenése tűnhet stílusosabb, mint divatos hűvös gomb hatásokat. Nézd, milyen ő azonnal [cssdeck.com] néz.

gradiens gomb

Színátmenetek nehéz animáció, sima változó háttér színét. Mit kell tenni? Válasz: box-shadow [linkre kattint, van egy szuper-duper alakja a bejárat].

De bármilyen lépés munkát hurrá.

Elég népszerű részlege a gombok kétszínű

Ez a CSS, de akkor is adjunk hozzá egy kis scriptet. Segur Hogy szeretem ezt a blogot. Ez a honlap sokáig az én „arany” tabok!

Magasságú bonyolult. Megadhatja azonos magasságú és line-height, de a line-height nem támogatja néhány mobil böngészők, például az Opera Mini. Teljesen távolítsa padding.

gombot, ha azt tervezi, a sok oldalt - „hogyan kell változtatni wordpress sablon”. Mert gombot vagy linket a php fájl hozzá, hogy az osztály, például class = „button16”. A stílus - a .css például
.button16

Ha egy oldalon, léteznie kell egy gombot, hogy a „HTML” -mode írásakor / szerkesztése cikkeket. A megfelelő helyen és hozzá stílusok és gombot. Csak ebben az esetben meg kell adjon meg, belső stílusok

háttér: RGB (206, 220, 231) lineáris-gradiens (RGB (206.220.231), RGB (89.106.114));

háttér-szín: rgb (206, 220, 231);
background-image: lineáris-gradiens (RGB (206.220.231), RGB (89.106.114)); Medoti Dorf Üdvözöljük, köszönöm a cikket!
Mutasd meg, hogyan kell egy gombot, szélességében a blokk?
a.knopka szín: #fff; / * A szöveg színe * /
text-decoration: none; / * Vegye ki a aláhúzás származó linkek * /
a felhasználó által válasszon: none; / * Vegye ki a kijelölt szöveget * /
háttér: RGB (212,75,56); / * Háttér gomb * /
padding. 7em 1.5em; / * Padding a szöveg * /
vázlat: none; / * Vegye ki a hurkot a Mozilla * /
>
a.knopka: hover / * Amikor az egérrel a kurzort * /
a.knopka: aktív / * * Gombbal / NMitra Hello!

Talia képernyő Orizzontale

Anonymous Köszönjük gombok - úgy néz ki, szuper. Névtelen Ez segített a munkában egy kezdő.
Ugyanakkor, mivel a központtól a szöveget kapcsolatban az ikonra, hogy áll a gomb előtt
magasság: 40px; (Gombok H)
line-height: 40px; (Neznamov, de ha a gomb magassága megegyezik a szöveg egy vonalban van a viszonyított magassága az ikonok a bal oldalon)
Csak kiderült, ha elolvassa a fórumot, az szükséges, hogy a magasság = line-height

Most újra olvasni újra a keresést, hogyan kell eltávolítani a kiemelése.

Nagyon egyszerűen nincs elég részletes leírás, olyan paraméter, amely azt jelenti.

Bármilyen kombinációja a funkció szóval próbáltam, de megérteni nem tudott.

Azt lehet mondani, hogy. Előre köszönöm szépen!

a.button_main_ico float: left;
szélesség: 200px;
magasság: 24px;
font-size: 16px;
font: Verdana, Arial, Helvetica;
text-align: center;
border: none;
border-radius: 6px;
color: # F8F8F8;
background-color: # 3895EA;
text-decoration: none;
vázlat: none;
felhasználó-select: nincs ;;
átmenet: 0.2s;
>
a.button_main_ico: hover background-color: #BABABA;
>
a.button_main_ico: fókusz background-color: # D8D8D8;
>
a.button_main_ico: fókusz: hover background-color: #DFDFDF;
>

a.button_main_ico: mielőtt tartalom: url (../ ico_L_ready.png);
> NMitra hozzá az ikonra: korábban? Akkor meg kell körülvenni a szöveg span. előtt és span állítsa vertical-align: közép;

a.button_main_ico: korábban,
a.button_main_ico span tartalom: url (../ ico_L_ready.png);
függőleges-align: közép;
>

Köszönjük a részvételt, és adott irányba.

A válasz és irány nagyon köszönöm. NMitra magassága egy meghatározott állandó magasságú: 24 képpont; Anonymous azonban megtalálta a választ, hogy eljött hozzám.

HTML
Gombot egy ikon, és a szöveg igazított közepén a gomb:
gomb

(A „osztály” - megváltozott az angol és akkor nem nyomtatható)

A CSS
a.button_main float: left;
szélesség: 200px;
magasság: 24px;
font-size: 16px;
font: Verdana, Arial, Helvetica;
text-align: center;
border: none;
border-radius: 6px;
color: # F8F8F8;
background-color: # 550000;
text-decoration: none;
vázlat: none;
felhasználó-select: nincs ;;
átmenet: 0.2s;
>
a.button_main: hover background-color: # ba0000;
>
a.button_main: fókusz background-color: # D80000;
>
a.button_main: fókusz: hover, a.button_history: fókusz: hover background-color: # DF000;
>

ico_name background-image: url (../ ico_name.png);
background-repeat: no-repeat;
display: inline-block;
függőleges-align: közép;
szélesség: 24 képpont;
magasság: 24px;
background-position: 0px -1px;


Itt tetszett a gomb osztály, hogy megszabaduljon az ikon osztályban. Így használjuk egy osztályba az összes alkalmazás gombok és az egyetlen változás osztályok szükség ikonok.

előző ◈ a következő