Immagine pulsante CSS

In questo articolo useremo CSS sull'elemento pulsante della lingua di markup ipertestuale. Di solito, l'elemento del pulsante predefinito è molto semplice e non ha uno stile ed effetti presenti in esso. Con l'aiuto di CSS, utilizziamo le diverse proprietà di stile e le aggiungiamo a questo elemento. Queste proprietà sono correlate allo stile del testo, alla regolazione delle dimensioni, ai colori dello sfondo, agli effetti di animazione e all'aggiunta di immagini. In questo articolo, ci concentreremo principalmente sull'aggiunta di un'immagine a una proprietà del pulsante applicabile tramite CSS. Per implementare questo approccio, utilizzeremo il blocco note ++ che ci aiuterà a modificare il nostro file HTML e testarlo a eseguirlo sul nostro browser.

Esempio 01: Utilizzo del tag in stile CSS per aggiungere un'immagine in un pulsante in un file HTML

In questo esempio, aggiungeremo un'immagine all'interno di un pulsante usando il tag in stile CSS nell'intestazione del file. All'interno del tag di stile, costruiremo una classe per il pulsante, che verrà chiamato più avanti nel corpo. Quindi, creeremo uno script in cui aggiungeremo un'immagine a un pulsante usando la tecnica che abbiamo menzionato in precedenza.

Nello script precedente, abbiamo aperto un tag di stile nell'intestazione del file. In questo tag, apriamo i parametri della classe pulsante in cui definiremo diverse proprietà di progettazione per l'elemento pulsante. Innanzitutto, aggiungiamo l'immagine per lo sfondo del pulsante. Possiamo aggiungere l'immagine tramite "URL" o "SRC". Quindi aggiungiamo la proprietà di dimensioni di sfondo che è dichiarata come una "copertura". Quindi definiamo anche la larghezza e l'altezza del pulsante. Dopo questo, chiudiamo il tag di stile e ci spostiamo al tag del corpo. In questo tag, aggiungiamo un'intestazione usando il tag H1. Quindi, il tag del pulsante si chiama. In questo tag, chiamiamo la classe di stile che abbiamo creato in precedenza per ereditare tutto lo stile definito in classe. Quindi, chiudiamo tutti i tag rimanenti e salviamo il file in formato HTML.

Come possiamo vedere nell'output precedente, l'immagine appare come un pulsante sulla pagina del nostro browser insieme all'intestazione. Ciò giustifica che la classe di stile è stata ereditata con successo dal tag del pulsante.

Esempio 02: aggiunta di un'immagine in un pulsante usando un approccio CSS in linea

In questo caso, aggiungeremo un'immagine a un pulsante usando l'approccio CSS in linea. Aggiungeremo un'immagine a un elemento pulsante predefinito del linguaggio di markup ipertestuale dandogli l'URL di un'immagine in questo metodo. Ora, diamo un'occhiata alla sceneggiatura per questa tecnica.:

Nello script riflesso nell'immagine, possiamo vedere che l'intestazione del file è vuota perché useremo l'approccio CSS in linea in questo esempio. Apriamo il nostro tag pulsante. Nel tag, menzioniamo il CSS che vogliamo che il pulsante abbia nella proprietà di stile. Citiamo tutto lo styling in questa proprietà e li separamo con i punti e virgola. Aggiungiamo anche un'immagine usando la parola chiave dell'immagine di sfondo e assegniamo un'immagine tramite URL. Quindi il tag del pulsante viene chiuso insieme al tag del corpo. Dopo questo, apriamo questo file HTML sul nostro browser.

L'output precedente è la prova che l'approccio del tag in linea in linea è stato un successo. Possiamo vedere che l'immagine viene aggiunta al pulsante e il pulsante predefinito viene ora trasformato in un'immagine.

Esempio 03: Utilizzo dei tag in stile CSS per aggiungere un'immagine a un pulsante quando si libra

Aggiungeremo un'immagine a un pulsante che apparirà solo quando il pulsante sarà litigato in questo esempio. Useremo il tag di stile CSS per fornire un pulsante con tale comportamento in un file HTML. Creeremo una classe separata per separare questo stile per un elemento specifico in questo esempio. Per raggiungere questo obiettivo, dovremmo scrivere il seguente script:

Nello script precedente, abbiamo aperto il nostro tag principale per il file HTML. In questo tag, lo stile del pulsante è definito aprendo una classe per l'elemento pulsante. In questa classe, definiamo prima la larghezza e l'altezza del pulsante. Quindi, aggiungiamo una proprietà che trasforma il cursore in un puntatore e diamo anche al testo una dimensione ragionevole. Quindi, aggiungiamo un metodo ereditato chiamato "Hover" alla classe. In questa funzione, aggiungiamo un'immagine allo sfondo tramite URL e assegniamo una proprietà alla dimensione di sfondo chiamata "copertina".

Dopo questo, chiudiamo tutti i tag di stile e ci muoviamo verso il corpo di questo file. Nel tag del corpo, aggiungiamo un'intestazione utilizzando il tag H1 e il tag pulsante viene aperto dopo il tag di intestazione. Nel tag del pulsante, chiamiamo la classe che abbiamo creato nel tag di stile dell'intestazione del file. E poi, chiudi il pulsante e il tag del corpo. Dopo questo, apriamo questo file nel nostro browser per ottenere il seguente output:

L'output che vediamo in questo file è il risultato dopo che il pulsante è stato sospeso. Quando ci libramo sul pulsante, viene visualizzata l'immagine che abbiamo assegnato nel tag di stile dell'intestazione del file.

Esempio 04: trasformazione del tag in stile CSS di un pulsante predefinito in un'icona per la funzione successiva e precedente

In questo esempio, trasformeremo i due pulsanti predefiniti del linguaggio di markup ipertestuale utilizzando il tag in stile CSS. Trasformeremo i due pulsanti in questo esempio nelle icone successive e precedenti aggiungendo un'immagine nel tag di stile. Dovremmo scrivere il seguente script per farlo:

Nello script precedente, aggiungiamo un tag di stile nell'intestazione del file. Quindi, creiamo due classi per i due pulsanti nel tag di stile. In queste classi, aggiungiamo un'immagine rispettivamente a entrambi i pulsanti, usando la proprietà dell'immagine di sfondo e il formato URL per l'immagine. Dopo aver assegnato entrambe le classi con le loro proprietà, chiudiamo lo stile e il tag della testa e apriamo il tag del corpo per creare il contenuto per la pagina del nostro browser. Innanzitutto, diamo al bordo un'intestazione con l'aiuto del tag H1, che è una dimensione dell'intestazione definita in HTML. Quindi, creiamo due pulsanti. In entrambi questi pulsanti, assegniamo la classe relativa definita nel tag di stile. Dopo questo, chiudiamo le schede e apriamo questo file sul nostro browser dopo averlo salvato.

L'output precedente è il risultato del nostro script. Come possiamo vedere, entrambi i pulsanti sono allineati e le immagini delle classi di stile vengono inserite correttamente. Ora, i pulsanti predefiniti vengono trasformati nelle icone successive e precedenti per una pagina Web utilizzando CSS.

Conclusione

In questo articolo, abbiamo discusso di diversi esempi di aggiunta di immagini a un pulsante usando CSS. Abbiamo usato il CSS in linea e il tag di stile CSS per aggiungere le immagini a un pulsante predefinito in un file HTML. Abbiamo implementato diversi effetti su un pulsante per aggiungere un'immagine come l'effetto hover o lo sfondo dello stile di copertura utilizzando il blocco note ++ per modificare il file HTML. Abbiamo usato le diverse proprietà nello stile CSS dell'elemento pulsante per trasformarle in un attributo attraente nella nostra pagina web.