Creați un buton css pe site, mnogoblog

1. Servicii online pentru crearea butoanelor CSS.

Pe Internet există foarte bune servicii online pentru crearea butoanelor CSS:

2. să analizeze mai în detaliu crearea de butoane CSS cu ajutorul «css-tricks.com/examples/ButtonMaker/» servicii on-line.

Puteți descărca codul acestui serviciu de pe site-ul meu - descărcați serviciul pentru crearea butoanelor CSS.

1. Glisoare - reglați dimensiunea butonului și rotunjirea colțurilor;
2. Gradientul de culori de top - culoarea gradientului superior;
3. Bottom Gradient Color - culoarea gradientului inferior;
4. Culoarea frontală superioară - culoarea frontierei superioare a butonului;
5. Culoarea fundalului culorii - culoarea butonului atunci când se deplasează peste el;
6. Culoarea textului - culoarea textului;
7. Culoarea textului hover - culoarea textului când treceți peste buton;
8. Culoarea fundalului activ - culoarea butonului când faceți clic pe acesta.

În stânga - puteți vedea cum arată butonul CSS și dacă dați clic pe el, veți vedea codul CSS al butonului pe care îl puteți copia, în mod implicit se arată astfel:

Aici, în opinia mea, totul este perfect vizibil - ceea ce este responsabil pentru asta în codul CSS al butonului:

În primul rând, butonul are trei stări:

1. Butonul este în repaus;

2. Când mouse-ul este plutind peste buton, clasa hover este responsabilă de el;

3. Când facem clic pe butonul - este responsabil pentru clasa activă (această clasă, am aproape nu se vedea, cu toate acestea, dacă vom folosi efectul de întârziere în momentul conectării - vă puteți bucura din plin).

Și, în consecință, pentru toate aceste clase (Hover, activ) atribuit lor buton stiluri de culoare de fundal (background), culoarea textului (culoare), și altele.

În al doilea rând, acest cod arată utilizarea diferitelor proprietăți:

gradient - responsabil pentru gradient,

raza - rotunjirea colțurilor butonului,

umbra - umbre,

Următoarele este de a crea o legătură cu buttom de clasă (implicit este prezent buton în codul CSS) și inserați-l în cazul în care vrem să vedem acest buton, de exemplu, o vom crea în bara laterală - site-uri de pe noi WordPress - panoul de control din meniul din stânga „aspect“, ei sub „Widgets“, selectați widget-ul numit „text“ și trageți-l în bara laterală, apoi prevede următoarele în ea:

În final, primim următorul buton:

PS: Unele teme utilizează deja clasa "buton" în stilurile lor, așadar este mai bine să le schimbați la ceva mai original, de exemplu adăugați numerele - "button777" ...

Înregistrări similare:

Navigare după înregistrări

Articole similare

• Creați un cursor prin pluginul glisant neted, mnogoblog

Trimiteți-le prietenilor: