Durante la progettazione di un sito web avrai spesso un pulsante che vuoi che appaia in un certo modo. Ad esempio, potresti volere che un pulsante abbia un colore di sfondo rispetto ad altri elementi della pagina per attirare l`attenzione dell`utente sul pulsante.
Utilizzando CSS, gli sviluppatori possono creare pulsanti con stili. CSS ti permette di cambiare tra le altre cose.
colore, dimensione del testo, bordo, larghezza e altezza di un pulsante. Questo tutorial discuterà, con esempi, come usare una serie di proprietà CSS per dare uno stile a un HTML pulsante. Quando finirai di leggere questo tutorial, sarai un esperto nello stile dei pulsanti usando i CSS.
Panoramica dei pulsanti
Puoi definire un pulsante in diversi modi HTML. I due approcci più comuni sono Trova la tua corrispondenza Bootcamp
Se vogliamo dare uno stile al nostro pulsante, in altre parole, per personalizzare l`aspetto della pagina, dobbiamo usare css In questo articolo, discuteremo come fare quanto segue su un pulsante: ..
Cambia il colore di sfondo
Cambia il colore del testo
Cambia le dimensioni del testo.
Aggiungi padding.
arrotondare gli angoli.
Aggiungere un bordo colorato.
Usalo: .... funzione al passaggio del mouse
Aggiungi ombra
Cambia larghezza
Disattiva
Animalo.
Discuteremo anche come creare gruppi di pulsanti orizzontali e verticali.
Back - Colore piano
Durante la progettazione di un pulsante, la prima cosa che potresti voler fare è impostare un colore di sfondo - pianificare il pulsante. Per impostazione predefinita, un pulsante ha uno sfondo bianco e testo nero Usando il colore di sfondo CSS, c e cambiare il colore di sfondo di un pulsante.
Supponiamo che tu stia progettando un pulsante per un sito Web e desideri che il pulsante abbia uno sfondo rosa. Possiamo cambiare il colore del nostro pulsante usando il seguente codice CSS:
Il nostro codice restituisce:
Utilizzando la proprietà del colore di sfondo, abbiamo cambiato il colore di sfondo del nostro pulsante in rosa. Possiamo cambiare il colore di sfondo del nostro pulsante in un colore usando questa proprietà.
Colore testo
Per cambiare il colore del testo di un pulsante puoi usare il color property. un pulsante e vogliamo che il pulsante abbia uno sfondo rosa e il testo in verde. Potremmo creare questo pulsante utilizzando il seguente codice:
Il nostro codice Restituisce:
Il nostro pulsante ha le stesse dimensioni di prima, ma ora la dimensione dei caratteri all`interno è 20px. Abbiamo utilizzato l`attributo della dimensione del carattere per impostare la dimensione del testo nel nostro pulsante.
Padding
Durante la progettazione di un pulsante, potresti decidere che desideri una certa quantità di spazio tra il testo all`interno di un pulsante e le pareti esterne del pulsante. È qui che entra in gioco la proprietà di ammortizzazione.
La proprietà di riempimento utilizza indicatori di lunghezza (px, em e e così via ) o valori percentuali ‚Äã‚Äãper definire una certa quantità di spazio tra i pulsanti di testo e i suoi bordi.
Supponiamo di voler creare due pulsanti nella nostra pagina. Un pulsante dovrebbe avere un riempimento di 40px e l`altro dovrebbe avere un riempimento di 20px. Possiamo creare questi pulsanti usando il seguente codice:
Il nostro codice restituisce:
Puoi usare la proprietà border-radius per creare pulsanti rettangolari con angoli arrotondati. Di seguito sono riportati tre esempi di codice che utilizzano la proprietà border-radius. Per illustrare l`effetto delle diverse dimensioni del raggio, ogni esempio utilizza un raggio del bordo di dimensioni diverse.
