Cum de a face din butoanele pentru site-ul css - frumos, tri-dimensională
Cum de a crea un buton
În primul rând, aș dori să încep prin a spune că puteți să creați-vă un buton diferit. Totul depinde mai degrabă de scopul pentru care este nevoie. Desigur, pentru a trimite formularul, de exemplu, trebuie să-l creați, după cum urmează:
HTML5 și CSS3 practica de la zero la rezultatul!
Dar aproape toate celelalte scopuri și se va potrivi cu cealaltă opțiune. Ce vrei să spui prin toate butoanele? Mulți cred că elementele de meniu sau alte elemente, făcând clic pe acel site care se schimbă, divulgate sau afișate. Astfel de elemente pot fi create în următoarele moduri:
Cu aceeași etichetă de intrare:
Un astfel de buton nu va face nimic și faceți clic pe ea pentru nimic plumb. Avea nevoie folosind script-uri pentru a stabili ce se întâmplă atunci când faceți clic. O altă opțiune pentru a crea:
(Sau interval în cazul în care ar trebui să fie elementul cu litere mici). Desigur, această opțiune este mai rău că trebuie să scrie unele stiluri suplimentare pentru proiectare și de intrare de tip = „butonul“ are deja unele implicit.
Desigur, este un pic mod greșit de a crea. Ar trebui să fie utilizat numai atunci când este necesar pentru a face independent de celălalt buton care nu este parte a formularului. A treia opțiune:
Intrare susține acest punct de vedere - pur grafic. În acest caz, este suficient să se scrie în jos calea și imaginea selectată va fi clickable, se va specifica ce ar trebui să se întâmple atunci când apăsați. A patra opțiune:
În HTML au asociat tag-ul buton, care ajută la crearea unor butoane cu diferite conținuturi. În acest caz, avantajul este că aveți posibilitatea să inserați orice conținut direct între deschidere și eticheta de închidere.
Butonul poate fi utilizat atât în formă și în sine. În cazul în care rezultatul de presare este nevoie pentru a trimite la server, eticheta trebuie să fie într-o formă de container pentru funcționarea corectă.
Ei bine, cu crearea tuturor desigur, dar acum înapoi la înregistrarea lor. Să presupunem că l-am creat cu ajutorul introducerea datelor, ce urmează? Dacă trebuie să modificați aspectul elementului, puteți utiliza diferite css-proprietăți. De exemplu, să ne prescrie astfel:
Lățimea și înălțimea elementului este mai bine să nu ceară, și dimensiuni folosind forma de umplutură. Adăugăm aceste stiluri:
A doua proprietate vă permite să treceți pe buton pentru a schimba forma cursorului pe index, pentru a face clar că acesta este un buton, și puteți să faceți clic pe ea.
HTML5 și CSS3 practica de la zero la rezultatul!
Introducerea butonului grafic. Ca un avantaj al butonului tag-ul, am arătat că este posibil să se introducă o imagine. Dar, de fapt, se poate face fără probleme, și elemente de intrare. Deci, chiar și mai corect, deoarece imaginea nu este adăugat la tag-ul img, și prin specificarea fundal. Ca un exemplu, eu folosesc imagine button.png.
Este recomandabil să introduceți un buton este png imagine, deoarece acestea ar putea îmbunătăți aspectul.
În consecință, interdicția repetată a imaginilor pe orizontală și pe verticală, precum și a da o liniuță mare pe stânga, deoarece acest lucru este în cazul în care vom aranja imaginea. Mai degrabă, ea va fi acolo în sine, poziția sa poate fi controlat cu ajutorul background-position.
Prin urmare, să ne adăugați poziția de fundal. De exemplu, propunem să publice imaginea de pe dreapta în loc de stânga. De asemenea, pentru aceasta trebuie să se schimbe direcția, cu care avem o căptușeală internă. Ea trebuie să fie făcut dreapta.
Poziție opțional set proprietăți de fundal de poziție, unde am folosit scurtătura care a permis să definească toți parametrii fundalului într-o singură linie. Poziția este determinată de două valori (mai întâi pe orizontală, a doua verticală). Valorile pe care le puteți specifica cuvinte cheie în pixeli și procente. Rezultatele noastre arată că imaginea va fi pe dreapta pe centrul orizontal și vertical.
Folosind umbre tridimensionale
Următoarea recepție este realizată folosind una dintre proprietățile CSS3 - box-shadow. Acesta vă permite să adăugați un buton, tridimensională, pentru că, uneori este necesar pentru a proiecta. Anterior, acest lucru a necesitat utilizarea de imagini suplimentare, dar acum nu este neapărat să fie mult mai bine de a utiliza o umbră.
recepție Sam este foarte simplu, trebuie doar să ne mișcăm ușor umbră și dau o culoare. Adauga Stil pentru a introduce o astfel de proprietate:
De fapt, umbrele, puteți adăuga la fel de mult ca este necesar, doar pentru a le enumera separate prin virgulă.
Aspect hover
În general, cele mai multe dintre butoane pentru a schimba aspectul lor într-un fel, atunci când situându-se sau făcând clic pe ele. Este o formă bună de web design, pentru că este mai convenabil pentru utilizator, care se va vedea în mod clar că el a adus cursorul la acest element. Cum de a schimba aspectul unui buton atunci când vă mutați? Utilizați Hover pseudo.
Acesta este modul în care selectorul va veni în acest caz. El va alege toate de intrare de tip buton de pe poziția cursorului ecran. Dacă doriți să selectați doar un singur element, este mai bine să se aplice prin stilul sau identificator de clasă. Prin urmare, puteți schimba culoarea de fundal, text, schimba imaginea, pentru a transforma elementul, etc. Dacă doriți să faceți modificări au avut loc treptat, mai degrabă decât brusc, utilizați proprietatea de tranziție.
Acum, toate modificările aspectul va avea loc fără probleme în decurs de 1 secundă. Așa că astăzi vom discuta proprietățile css simple, care pot fi folosite pentru butoanele de decorare. După cum puteți vedea, nimic complicat. Mai multe informații puternic puteți găsi în cursul primei pe CSS3. și eu sunt în asta cu tine spune la revedere.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
