Butoane, css - exemple
Există mai multe tipuri de intrare pentru a crea un buton și butonul eticheta [= tip „buton | resetare | submit“]. Se pare și funcțiile ei sunt absolut identice.
Când se utilizează tag-ul butonul?- buton are o deschidere și o etichetă de închidere, și înseamnă că poate conține tag-uri pentru copii
- atunci când textul de pe un singur buton, iar valoarea de valoare care urmează să fie transmise atunci când faceți clic pe altul.
Cum sa faci un buton de pe CSS
Din exil, durata sau tag-ul div poti face cu CSS este un buton foarte frumos.
Creați un buton, „Ai nevoie pentru a schimba aspectul unui buton atunci când vă mutați sau să facă un efect buton de presă?“
Trebuie să recunosc că cel mai greu să dau seama cum să se comporte în timpul unui buton de presă.
Uneori, aspectul cel mai simplu poate arata mai elegant decât fantezie cu efecte buton se răcească. Uite cum ea imediat [cssdeck.com] arată.
buton de gradient
Gradienții sunt dificil de animație, buna de schimbare a culorii de fundal. Ce să fac? Răspuns: box-shadow [click pe link-ul, există o formă super-Duper de la intrare].
Dar orice lucrare de mișcare pe hurrah.
diviziune destul de popular din butoanele de pe două culori
Este în CSS, dar puteți adăuga încă un pic script. Segur Cum îmi place acest blog. Acest site este o lungă perioadă de timp în filele mele „de aur“!
Pentru înălțime complicat. Puteți specifica aceeași înălțime și linia de înălțime, dar linia de înălțime nu este susținută de unele browsere mobile, de exemplu, Opera Mini. Se îndepărtează complet umplutură.
buton, dacă aveți de gând pe mai multe pagini - „cum să modificați șablon WordPress“. Pentru butoane sau link-uri din fișierul PHP se adaugă la clasa, de exemplu, clasa = „button16“. Un stil - în fișierul .css, de exemplu,
.button16
în cazul în care pentru o singură pagină, ar trebui să existe un buton pentru a merge la „HTML“ -mode la scrierea / editarea de articole. În locul potrivit și adăugați stiluri și buton. Numai în acest caz, ar trebui să fie sigur de a intra în interiorul stiluri
fundal: rgb (206, 220, 231) liniar gradient (rgb (206,220,231), rgb (89106114));
background-color: rgb (206, 220, 231);
background-image: gradient linear (rgb (206,220,231), rgb (89106114)); Medoti Dorf Bine ați venit, vă mulțumesc pentru articol!
vă arată cum să facă un buton pe lățimea blocului?
Culoare a.knopka: #fff; / * Culoare text * /
text-decoration: none; / * Scoateți subliniere din link-uri * /
utilizator-selectați: none; / * Scoateți selectarea textului * /
fundal: rgb (212,75,56); / * Butonul de fundal * /
umplutură. 1.5em 7em; / * Padding privind textul * /
schiță: nici una; / * Scoateți bucla în Mozilla * /
>
a.knopka: hover
a.knopka: activ
Anonim Vă mulțumim pentru butoane - arată super-. Anonim a ajutat în munca pentru un incepator.
Cu toate acestea, pentru a centra textul în raport cu pictograma care stă în fața butonului
înălțime: 40px; (Buttons H)
line-height: 40px; (Neznamov asta, dar dacă butonul este aceeași înălțime ca și textul este aliniat cu înălțimea în raport cu pictogramele din partea stângă)
Doar aflat citind pe forum, este necesar ca înălțimea = line-height
Acum re-citit din nou în căutarea cum să eliminați subliniere.
Foarte pur și simplu nu au suficient descriere detaliată, un parametru care înseamnă.
Orice combinație de cuvinte funcționale încercat, dar să înțeleagă și nu a putut.
Poti spune asta. În avans, vă mulțumesc foarte mult!
a.button_main_ico float: left;
lățime: 200px;
înălțime: 24px;
font-size: 16px;
font: Verdana, Arial, Helvetica;
text-align: center;
frontieră: nici una;
border-radius: 6px;
Culoare: # F8F8F8;
background-color: # 3895EA;
text-decoration: none;
schiță: nici una;
-Utilizator select: none ;;
tranziție: 0.2S;
>
a.button_main_ico: hover culoare de fundal: #BABABA;
>
a.button_main_ico: focus background-color: # D8D8D8;
>
a.button_main_ico: focalizare: hover culoare de fundal: #DFDFDF;
>
a.button_main_ico: înainte de conținut: URL-ul (../ ico_L_ready.png);
> NMitra adăugați pictograma folosind: înainte? Apoi, trebuie să înconjoare intervalul de text. înainte și durata de set vertical-align: mijloc;
a.button_main_ico: înainte,
Conținutul interval a.button_main_ico: url (../ ico_L_ready.png);
vertical-align: middle;
>
Vă mulțumim pentru participare și de direcția dată.
Pentru un răspuns și direcția în care Multumesc mult. înălțimea NMitra unui anumit înălțime fixă: 24px; Anonim, cu toate acestea, găsit răspunsul care a venit la mine.
în HTML
Buton cu o pictogramă și textul aliniat în mijlocul butonului:
buton
(Cuvântul „clasa“ - a schimbat în engleză și apoi nu vor fi imprimate)
În CSS
float a.button_main: stânga;
lățime: 200px;
înălțime: 24px;
font-size: 16px;
font: Verdana, Arial, Helvetica;
text-align: center;
frontieră: nici una;
border-radius: 6px;
Culoare: # F8F8F8;
background-color: # 550000;
text-decoration: none;
schiță: nici una;
-Utilizator select: none ;;
tranziție: 0.2S;
>
a.button_main: hover background-color: # BA0000;
>
a.button_main: focus background-color: # D80000;
>
a.button_main: focus: hover, a.button_history: focalizare: hover background-color: # DF000;
>
ico_name background-image: url (../ ico_name.png);
background-repeat: no-repetare;
display: inline-block;
vertical-align: middle;
lățime: 24px;
înălțime: 24px;
background-position: 0px -1px;
Aici mulțumit de faptul că clasa de buton, pentru a scăpa de clasa pictograma. Deci, vom folosi o clasă pentru toate butoanele de aplicații și singurele clase de schimbare ca pictograme necesare.