Butoane CSS. Beneficii. Stiluri. estetică

Probabil, nici un site nu va face fără a se referi la alte pagini de butoane. Toată lumea dorește să atragă atenția asupra site-ului lor și, în același timp, să folosească o varietate de mijloace. În designul web, ele includ designul butoanelor care diferă în funcție de parametri - în dimensiune, formă, efect și așa mai departe.

Butoanele CSS sunt cele mai convenabile. Pentru un moment, stilul lor poate fi complet schimbat. Și, desigur, acest lucru oferă oportunități suplimentare pentru proiectarea site-ului ca un întreg.

În primul rând, pentru a nu exista confuzie și neînțelegere, este necesar să înțelegem câteva concepte.

CSS, ce este

CSS, care înseamnă "foi de stil în cascadă" în traducere, este astăzi una dintre principalele tehnologii de pe Internet. Fără această limbă este puțin probabil să gestionăm cel puțin un site.

Codul CSS reprezintă instrucțiuni pentru browsere care conțin informații despre cum să afișați elementele de pe pagină și de unde să le faceți.

Este convenabil să stocați astfel de instrucțiuni într-un fișier separat care are extensia .css. Pe de altă parte, le puteți pune la începutul html-documentului.

Butonul de pe site. Ce este?

Un buton sau un element grafic pentru navigarea unui site ar trebui să atragă atenția astfel încât vizitatorul să vadă că informațiile care îl interesează se ascund în spatele acestuia și, pe lângă aceasta, ar dori să o apese. Când este suficient de luminos și proeminent, va fi observat. Un astfel de buton poate determina vizitatorii, de exemplu, să își lase feedbackul pe site sau să trimită o aplicație, să se aboneze la un buletin informativ interesant și, bineînțeles, să traducă pur și simplu la secțiunea site-ului solicitată de utilizator.

Butoanele sunt statice, animate, dinamice, cu și fără sunet.

Acestea pot fi create special, de exemplu, în Photoshop, și pot încărca o imagine pe site și puteți să le găsiți cu ușurință și rapid în CSS.

Butoane CSS

Asigurați-vă că aceste butoane sunt foarte simple. Un mare avantaj al aplicației lor este că ele pot fi schimbate dincolo de recunoaștere în orice moment, literalmente în câteva secunde.

După cum știți, butoanele au trei poziții:

• odihna, cand nu se face nimic cu el, ci pur si simplu navigarea pe pagina;
• poziție, cu cursorul pe ea;
• și activare la apăsare.

Butoanele vor fi afișate pe deplin în astfel de browsere ca Firefox, Safari, Opera, Chrome. În același timp, în Internet Explorer 9, butoanele nu pot fi afișate la maxim. De exemplu, colțurile colțurilor, umbra textului și cursa în jurul butonului nu vor fi vizibile aici, deoarece aceste proprietăți nu sunt acceptate de acest browser. Cu toate acestea, în general Butoane CSS pentru site arata decent in aceasta versiune a browser-ului. În Internet Explorer 8 și în alte versiuni de mai jos opt, butonul nu va afișa în vrac, dar în același timp, vizibilitatea declivităților va rămâne.

Dacă comparați butonul sub forma unei imagini și butonul CSS, atunci diferența dintre locația de pe server va fi complet nesemnificativă. Dar butoanele CSS vor reduce numărul de cereri către server, dar acest lucru va fi deja un avantaj clar față de buton sub forma unei imagini.

Se pare că, chiar dacă unele proprietăți CSS nu sunt acceptate în browserele Internet Explorer, aceste butoane vor părea în continuare mai avantajoase decât imaginile simple, deoarece singurul lucru pe care utilizatorii Internet Explorer îl vor pierde este să vadă estetica tehnologiilor moderne pe web -Design. Dar acest dezavantaj este absolut nesemnificativ.

Pentru fiecare poziție, specificați propriul stil. Aceste stiluri sunt scrise într-un fișier .css special sau între etichetele de cap în pagina site-ului.

Plasați butonul pe site

Între etichete se scrie codul:

unde

id = "button2" aici înseamnă numele atribuit butonului,

href = "HYPERLINK" aici se dă o legătură directă cu documentul necesar,

TEXT - imprimă textul care va fi afișat pe buton.

Butoane stiluri

1. Stilul butonului CSS este înregistrat separat în document sau în pagină în sine:

2. Butoanele CSS sunt inițial scrise atunci când sunt în repaus:

3. Apoi, parametrii corespunzători butonului sunt înregistrați când cursorul este îndreptat spre el. Dacă în acest caz se modifică doar culoarea și umplutura, atunci în stil totul rămâne același, cu excepția culorii și umplerii:

4. Și ultimul parametru se referă la poziția butonului atunci când este apăsat cursorul. Adesea, în astfel de cazuri, doar un minim schimbă, de exemplu, culoarea, ca în cazul de față:

CSS - butoane frumoase

Puteți utiliza un gradient pentru a crea butoane. Cea mai bună metodă este să desenați un buton într-un editor grafic, de exemplu, un Photoshop, pentru a ști exact cu ce se va încheia. Dacă utilizați Photoshop, acesta are deja anumite gradienți, dar în plus puteți descărca mai multe și altele, cum ar fi doriți să ajungeți pe site.

Experimentând codul CSS și schimbând diferiți parametri, este posibil să schimbi butoanele frumoase CSS și selectând pentru a obține rezultatul dorit.

Acești parametri sunt:

- culoarea textului de pe buton;

- mărimea textului și a butoanelor;

- butoane de gradient de culoare;

- raza colțurilor butonului;

- și culoarea accidentului său.

Strict vorbind, puteți să vă relaxați calm, fără frică, să experimentați și să alegeți cea mai bună opțiune. În ciuda unui număr mic de parametri, puteți crea un buton de stil foarte divers.