Come creare un pulsante 3D usando CSS

L'interfaccia grafica di una pagina Web svolge un ruolo vitale nella qualità di un sito Web o di un'applicazione Web. Per aumentare l'usabilità e rendere attraente l'interfaccia, molte idee vengono praticate. Come altri elementi su un'interfaccia, ci sono anche alcuni pulsanti su quasi ogni altra pagina web che eseguono operazioni diverse. Una delle tecniche più comuni per migliorare la visualizzazione grafica di un'interfaccia è la creazione di un pulsante 3D anziché il semplice pulsante tradizionale.

Discutiamo come viene creato e aggiunto un pulsante 3D tramite uno stile CSS.

Creazione di un pulsante 3D usando CSS

Aggiungiamo un semplice esempio di creazione di un pulsante 3D in HTML utilizzando le proprietà di stile CSS. Inizia creando un tag di ancoraggio con l'attributo HREF uguale a "JavaScript: void (0)"Funzione per creare un pulsante semplice cliccabile:

= "JavaScript: void (0);"> Fai clic qui!

Il tag creato ha un attributo HREF contenente "JavaScript: void (0)" funzione. Questa funzione cambia la forma del cursore quando è puntata sul pulsante. Tra i tag di ancoraggio di apertura e chiusura c'è il testo da visualizzare sul pulsante "Clicca qui".

Ora è necessario modellare il pulsante semplice attraverso le proprietà di stile CSS per creare un display tridimensionale:

Aggiungi alcune proprietà della decorazione del testo per il testo da visualizzare sul pulsante:

Colore: RGB (236, 234, 234);
DECORAZIONE DEL TESTO: Nessuno;
Background-color: RGB (165, 16, 133);
Font-Family: Georgia, "Times New Roman", Times, Serif;
Font-size: 3em;
blocco di visualizzazione;

Quindi, aggiungi un po 'di "kit web"Proprietà per aggiungere effetti ombra e raggio al pulsante:

-WebKit-Border-Radius: 9px;
-WebKit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);

Il pulsante dovrebbe anche essere decorato rispetto alla sua area, margine e imbottitura, ecc

Margine: 100px Auto;
larghezza: 160px;
Testo-align: centro;
imbottitura: 4px;

Per aggiungere effetti ombra al pulsante quando è attivo o cliccato, c'è un CSS ":attivo"Selettore:

A: attivo
-WebKit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-Box-Shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Posizione: relativo;
Top: 7px;

Lo snippet di codice completo per la creazione del pulsante è seguente:

Colore: RGB (236, 234, 234);
DECORAZIONE DEL TESTO: Nessuno;
Background-color: RGB (165, 16, 133);
Font-Family: Georgia, "Times New Roman", Times, Serif;
Font-size: 3em;
blocco di visualizzazione;
imbottitura: 4px;
-WebKit-Border-Radius: 9px;
-WebKit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);
Margine: 100px Auto;
larghezza: 160px;
Testo-align: centro;
A: attivo
-WebKit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-Box-Shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Posizione: relativo;
Top: 7px;

Dopo aver eseguito il codice sopra, quanto segue sarà l'output:

Questo riassume il metodo per creare un pulsante 3D usando CSS.

Conclusione

Fare un pulsante 3D cliccabile tramite la proprietà Styling CSS richiede prima la creazione di un pulsante semplice tramite un tag HTML e quindi l'applicazione delle proprietà del kit Web CSS insieme ad altre proprietà che si riferiscono al tag HTML attraverso il quale è stato creato il pulsante. Questo rende il pulsante tridimensionale. Per aggiungere gli effetti al pulsante per l'istanza quando il pulsante viene cliccato o attivo, utilizzare il selettore CSS attivo.