Il pulsante CSS è stato cliccato
Esempio 01: Utilizzo di CSS per creare un pulsante produrre un effetto di rimbalzo in un file HTML
In questo esempio, utilizzeremo il tag CSS di stile per trasformare un pulsante in un effetto click. Ci concentreremo sull'effetto successivo di un clic sul pulsante e animeremo il pulsante per produrre un effetto di clic.
Abbiamo aperto un tag di stile nell'intestazione del file in cui definiremo lo styling del pulsante in una classe separata che può essere chiamato in qualsiasi tag pulsante in tutto il file. Apriremo la parentesi dopo aver dato alla classe un nome. Quindi, inizieremo dandogli l'imbottitura (in pixel) per regolare il pulsante sulla pagina. Quindi daremo il colore dello sfondo del pulsante. Dopo questo, verrà utilizzata la proprietà Box-Shadow. Il valore comprenderebbe il formato pixel per l'ombra e il formato RGBA per il colore dell'ombra. Quindi, daremo al pulsante un cursore di punta. Quando il pulsante verrà cliccato, il cursore verrà trasformato a causa di questa proprietà. L'ultima proprietà sarà la proprietà di transizione che specificherà il tempo di reazione dell'animazione del pulsante.
Dopo aver chiuso la parentesi, classificheremo un'altra funzione per questa classe separatamente. In questa funzione, specificheremo la scala di trasformazione e il cambiamento nell'ombra del bordo usando lo stesso formato che abbiamo usato in precedenza. Dopo questo, apriremo l'etichetta del corpo e gli daremo una voce e un pulsante. Nel tag del pulsante, menzioneremo il nome della classe che abbiamo appena creato nel tag di stile presente nell'intestazione del file.
Possiamo vedere che il pulsante nell'uscita sopra ha un'ombra e l'imbottitura è visibile. Sebbene, l'animazione sarebbe più visibile nel browser, ma lo stile è più visibile nello snippet sopra.
Esempio 02: Utilizzo di CSS per far rimbalzare un pulsante in un file HTML
In questo esempio, useremo i tag in stile CSS per far rimbalzare un pulsante quando è stato fatto clic su. Ci concentreremo sul risultato di un pulsante Click e animeremo il pulsante per produrre un effetto di rimbalzo.
Nello script sopra, abbiamo aperto un tag di stile nell'intestazione del file per specificare lo stile del pulsante. Lo stile del pulsante è archiviato in una classe separata che può essere utilizzata in qualsiasi tag pulsante durante il progetto. Dopo che abbiamo dato un nome alla classe, apriremo le parentesi della classe. Innanzitutto, daremo al pulsante un cursore puntatore in modo che quando viene cliccato, il cursore cambia. Quindi, aggiungeremo un po 'di imbottitura (in pixel) per modificare la posizione del pulsante sulla pagina. Infine, imposteremo il colore di sfondo del pulsante. Successivamente, la proprietà Box-Shadow verrà utilizzata con il valore costituito dal formato pixel per il formato ombra e RGBA per il colore dell'ombra. Lo allineeremo anche al centro.
Dopo aver chiuso le parentesi della classe, classificheremo un'altra funzione per questa classe.Specificheremo la scala di trasformazione e le modifiche nell'ombra del bordo nello stesso formato che abbiamo usato nella proprietà precedente. Successivamente, apriremo l'etichetta del corpo e aggiungeremo un intestazione e un pulsante ad esso. Nel nostro tag pulsante, dichiareremo il nome della classe che abbiamo appena integrato il tag di stile nell'intestazione del nostro file.
Possiamo vedere che il pulsante nello screenshot sopra ha tutto lo styling che abbiamo specificato nello stile e l'animazione di fare clic sul pulsante sarebbe evidente nel browser.
Esempio 03: Utilizzo di CSS per trasformare il colore del pulsante dopo aver fatto clic su di esso
In questo esempio, cambieremo il colore di un pulsante quando verrà cliccato. Useremo CSS in questo esempio e tutto lo stile verrà definito nel tag di stile per l'elemento pulsante.
Nello script sopra, apriremo un tag di stile nell'intestazione del file. Quindi, definiremo le proprietà di styling per il pulsante predefinito fornito dal linguaggio di markup ipertestuale. Nel tag di stile, inizieremo dando il colore di sfondo giallo del bottone. Successivamente, chiameremo la classe dei pulsanti con la proprietà di transizione focus e nella sua parentesi. Definiremo il colore di sfondo che sarà diverso dal colore di sfondo precedentemente definito. Ciò comporterà un cambio di colore quando verrà cliccata il pulsante.
Ora apriremo questo file HTML sul nostro browser e osserveremo la trasformazione del pulsante.
In questo frammento, possiamo vedere che il pulsante ha lo styling definito nella prima proprietà del tag di stile e quando facciamo clic su di esso, otteniamo il seguente output:
Il pulsante si è trasformato dopo il clic e il colore è ora rosso come definito nella parentesi del pulsante Focus.
Esempio 04: usando CSS per cambiare la forma di un pulsante dopo aver fatto clic su di esso
Quando si fa clic su un pulsante, in questo esempio modificheremo la forma. In questo esempio, applicheremo CSS. Tutto lo styling verrà definito nel tag di stile per l'elemento pulsante. La proprietà del focus del pulsante che si tradurrà nella modifica della forma e del colore del pulsante.
Apriremo un tag di stile nell'intestazione del file e forniremo le proprietà di styling per il pulsante predefinito fornito dal linguaggio di markup ipertestuale nello script sopra. Nel tag di stile, inizieremo creando lo sfondo del pulsante rosso e assegnando una dimensione al testo dalla proprietà delle dimensioni del carattere. Successivamente, chiameremo la classe dei pulsanti con la proprietà di transizione Focus e definiremo il colore di sfondo. Sarà diverso dal colore di sfondo precedentemente dichiarato, che è viola. Quindi, aggiungeremo la proprietà del raggio di frontiera e le assegneremo un valore nei pixel. Quindi, quando si fa clic sul pulsante, la forma e il colore cambieranno.
L'output sopra mostra lo stato del pulsante prima che venga fatto clic. Il pulsante ha un bordo rettangolare con sfondo rosso e se facciamo clic sul pulsante, otterremo l'output di seguito:
Ora possiamo vedere la trasformazione del colore e della forma del pulsante poiché il bordo ha bordi arrotondati e sfondo viola.
Conclusione
In questo articolo, abbiamo esaminato diversi esempi che CSS ci consente di creare un effetto sull'elemento pulsante del linguaggio di markup ipertestuale quando viene fatto clic. In questo articolo abbiamo usato l'approccio del tag di stile per aggiungere CSS all'elemento pulsante. Ci siamo concentrati sulla trasformazione di colore, forma e ombra del pulsante e abbiamo persino aggiunto alcune animazioni al pulsante quando verrà cliccato. In questo articolo abbiamo usato l'IDE Notepad ++ per implementare questi esempi.