Styling a bottone in CSS | Spiegato

Inserire semplici pulsanti sul tuo sito Web può essere un po 'noioso, tuttavia, aggiungere vari stili ad essi può migliorare il loro aspetto generale. Questo stile può essere eseguito utilizzando più proprietà CSS come colore di sfondo, colore, larghezza, imbottitura, box-shadow, transizione, ecc. Qui in questo articolo, ti insegneremo come modellare i pulsanti in varie mode. Questo post è progettato per coprire i seguenti argomenti.

1. Cambiare i colori dei pulsanti
2. Modificare le dimensioni dei pulsanti
3. Creazione di pulsanti arrotondati o cerchiati
4. Aggiunta dell'effetto hover ai pulsanti
5. Aggiunta di effetti ai pulsanti
6. Aggiunta di ombre ai pulsanti
7. Pulsanti per disabili di stile

Iniziamo.

Come cambiare i colori dei pulsanti

Allo scopo di cambiare i colori, più specificamente, i colori di sfondo dei pulsanti, viene utilizzata la proprietà CSS-Color-color. Di seguito ti abbiamo presentato un esempio.

Html

Pulsante

Usando HTML di base abbiamo creato un pulsante.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 20px 35px;
Font-size: 16px;

Oltre a dare al pulsante una certa imbottitura, bordo e dimensioni del carattere, abbiamo indicato il colore di sfondo su Rosy Brown. Puoi cambiare il colore in base al tuo desiderio.

Produzione

È stato creato un pulsante con un colore di sfondo marrone roseo.

Se desideri aggiungere colori solo al bordo del pulsante, usa la proprietà del bordo CSS.

CSS

.btn
Background-color: bianco;
Bordo: 2 px blu solido;
colore nero;
imbottitura: 25px;
Font-size: 16px;

Nel codice sopra, stiamo impostando il colore di sfondo su bianco, nel frattempo, il bordo solido è stata data una lunghezza di 2 px con colore blu.

Produzione

È stato generato un pulsante con bordo blu.

Come modificare le dimensioni dei pulsanti

Ci possono essere vari modi per modificare le dimensioni del pulsante e tutti i possibili modi sono descritti di seguito insieme agli esempi appropriati e al punto.

Metodo 1: modificando l'imbottitura dei pulsanti

Il primo e più usato modo per cambiare le dimensioni di un pulsante è utilizzando la proprietà di imbottitura. L'imbottitura diversa si tradurrà in diverse dimensioni di un pulsante.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
Font-size: 16px;

.btn1
imbottitura: 10px 24px;

.btn2
imbottitura: 32px 16px;

I lati superiore e inferiore del primo pulsante sono stati assegnati imbottitura di 10px, nel frattempo i lati destra e sinistra vengono somministrati di imbottitura di 24px. Per quanto riguarda il secondo pulsante, i lati in alto e in basso sono dotati di imbottitura di 32 px ciascuno, mentre i lati destra e sinistra sono riportati con imbottitura 16px.

Produzione

Sono stati creati pulsanti con vari imbottiture.

Metodo 2: modificando la dimensione del carattere

Un altro modo per modificare la dimensione di un pulsante è modificare la dimensione del carattere del pulsante TE. Aumentando o diminuendo la dimensione del carattere, la dimensione del pulsante viene interessata. Maggiore è la dimensione del carattere, maggiore è il pulsante. Considera lo snippet di codice di seguito.

Html

Pulsante
Pulsante

Qui abbiamo creato due pulsanti per dimostrare la differenza tra varie dimensioni dei caratteri e come questi influenzano le dimensioni dei pulsanti.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 20px 35px;

.btn1
Font-size: 12px;

.btn2
Font-size: 24px;

A entrambi i pulsanti sono stati assegnati lo stesso colore di sfondo, colore, bordo e imbottitura. Tuttavia, al primo pulsante è stata assegnata la dimensione del carattere di 12px e l'altro pulsante 24px.

Produzione

I pulsanti con varie dimensioni sono stati creati correttamente.

Metodo 3: modificando la larghezza dei pulsanti

Un altro modo per cambiare le dimensioni di un pulsante è regolare la sua larghezza. Segui l'esempio di seguito.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 20px 35px;
blocco di visualizzazione;
Margine: 5px 3px;
Font-size: 16px;

.btn1
larghezza: 20%;

.btn2
larghezza: 50%;

Ai fini della visualizzazione di ciascuno del pulsante in una nuova riga li stiamo convertendo in elementi a livello di blocco e impostando i loro margini. Inoltre, la larghezza del primo pulsante è impostata al 20%, mentre la larghezza del secondo pulsante è impostata al 50%.

Produzione

I pulsanti con varie larghezze sono stati creati con successo.

Come creare pulsanti arrotondati o cerchiati

Per creare pulsanti arrotondati o cerchiati, utilizzare la proprietà CSS Border-Radius. Ti abbiamo presentato un esempio di seguito.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 25px;
Font-size: 16px;

.btn1
raggio di frontiera: 8px;

.btn2
raggio di frontiera: 50%;

Nel codice sopra, allo scopo di arrotondare solo gli angoli del pulsante, stiamo dando al raggio di confine un valore nei pixel. Tuttavia, per rendere il pulsante un cerchio completo, abbiamo dato al raggio di confine un valore in percentuale.

Produzione

Un pulsante arrotondato e cerchiato è stato creato con grande facilità.

Come aggiungere l'effetto hover ai pulsanti

Per rendere i tuoi pulsanti più interessanti, puoi aggiungere loro un effetto hover per rendere il loro aspetto più attraente. Usa lo snippet di codice di seguito.

CSS

.btn
Background-color: bianco;
Bordo: 2px Solid Rosybrown;
colore nero;
imbottitura: 25px;
Font-size: 16px;

.btn: hover
Background-color: Rosybrown;
colore bianco;

Prima dell'effetto hover, il pulsante è stato disegnato utilizzando varie proprietà CSS. Nel frattempo, una volta che l'utente porta il mouse sul pulsante, il colore di sfondo cambierà in marrone roseo e il colore del carattere in bianco.

Produzione

È stato generato un pulsante con un effetto hover.

Un'altra cosa divertente che puoi fare è che si specifica la durata della transizione dell'effetto hover per renderlo più attraente utilizzando la proprietà della durata di transizione.

CSS

.btn
Background-color: bianco;
Bordo: 2px Solid Rosybrown;
colore nero;
imbottitura: 25px;
Font-size: 16px;
Durata di transizione: 0.5s;

.btn: hover
Background-color: Rosybrown;
colore bianco;

La durata della transizione è stata impostata su 0.5 secondi.

Produzione

Un effetto hover con una durata di transizione è stato aggiunto con successo.

Come aggiungere una dissolvenza in vigore ai pulsanti

La dissolvenza negli effetti viene utilizzata insieme agli effetti del mouse e questi possono essere aggiunti ai pulsanti usando la proprietà di opacità. Ecco un esempio.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 30px;
Font-size: 16px;
opacità: 0.4;
Durata di transizione: 0.5s;

.btn: hover
opacità: 1;

Prima dell'effetto hover, l'opacità del pulsante è stata impostata su 0.4. Considerando che, quando l'avvio dell'effetto hover, l'opacità passerà a 1 con una durata di transizione di 0.5 secondi.

Produzione

Una dissolvenza in effetti è stata implementata con successo.

Hwo per aggiungere ombre ai pulsanti

Usando la proprietà Box-Shadow, le ombre possono essere aggiunte ai pulsanti per migliorare la loro bellezza. Segui l'esempio di seguito.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 30px;
Font-size: 16px;
Durata di transizione: 0.5s;
Box-Shadow: 0 5px 10px 0 Gray;

Nel codice sopra, stiamo aggiungendo un'ombra di colore grigio e abbiamo assegnato ogni lato dell'ombra un po 'di lunghezza.

Produzione

Un'ombra è stata aggiunta correttamente al pulsante.

Nota: Puoi anche aggiungere un effetto hover insieme all'ombra per rendere il pulsante più attraente.

Come modellare i buttoni disabilitati

Per creare un pulsante Disabilita, dobbiamo menzionare un attributo disabilitato al tag pulsante in HTML, come mostrato nello snippet HTML di seguito:

Pulsante

Ai fini dello styling di pulsanti disabilitati, è possibile utilizzare due proprietà CSS che sono: opacità e cursore. Di seguito abbiamo dimostrato come è possibile creare un pulsante disabilitato.

CSS

.btn
Background-color: Rosybrown;
confine: nessuno;
colore bianco;
imbottitura: 30px;
Font-size: 16px;
Durata di transizione: 0.5s;
opacità: 0.4;
Cursore: non tollerato;

Per creare un pulsante disabilitato, l'opacità del pulsante è stata a 0.4 e il cursore a non consentire.

Produzione

È stato generato un pulsante disabilitato.

Conclusione

L'aggiunta di pulsanti semplici alle pagine web può essere un po 'noioso, tuttavia, acconciarli utilizzando varie proprietà CSS può migliorare il loro aspetto generale. Proprietà come sfondo, colore, raggio di confine, opacità, imbottitura, larghezza, shadow in scatola e così via possono tornare utili quando si dà un certo stile ai pulsanti. Oltre a questo, puoi anche aggiungere vari effetti ai pulsanti come il mouse o la dissolvenza, ecc. Inoltre, puoi anche animare questi effetti usando la proprietà di transizione. Questo post guida su vari modi in cui puoi modellare i tuoi pulsanti con l'aiuto di esempi.