Bordo del pulsante CSS
Esempio 01: Utilizzo di CSS per dare a un pulsante un bordo solido in un file HTML
In questo esempio, utilizzeremo un tag CSS di stile per modificare un pulsante in un file HTML. Aggiungeremo un bordo solido al pulsante predefinito che non ha limiti per evidenziarlo dallo sfondo e dal resto della pagina.
Abbiamo aperto il tag di stile e avviato un parametro pulsante per lo styling. In questo, abbiamo dato al pulsante un colore di sfondo usando il codice di riferimento HTML. Quindi abbiamo dato al bordo al pulsante scrivendolo come una parola chiave e gli abbiamo dato tre proprietà: le dimensioni del bordo del pulsante, lo stato del bordo e quindi il colore del bordo. Quindi, nello stile, abbiamo dato al pulsante un po 'di imbottitura, allineamento di testo e proprietà di visualizzazione per rendere il pulsante regolabile al browser e più visibile.
Quindi, abbiamo chiuso lo stile e la tag della testa e ci siamo trasferiti al tag del corpo. In questo tag, abbiamo fornito alla nostra pagina HTML un'intestazione utilizzando il tag H1 e quindi abbiamo aperto il tag del pulsante. Dopo questo, chiuderemo entrambi i tag e salveremo questo script in ".Formato HTML "per aprirlo sul nostro browser.
Dopo aver eseguito lo script sul nostro browser, otterremo l'output sopra. L'output sopra mostra che il pulsante ha lo stile proprio come abbiamo specificato nel tag di stile nell'intestazione del file.
Esempio 02: Utilizzo di CSS per dare un bordo punteggiato a un pulsante in un file HTML
In questo esempio, aggiungeremo un bordo punteggiato al pulsante predefinito, che non ha bordo, per distinguerlo dallo sfondo e dal resto della pagina. Lo script verrà sviluppato in Notepad ++ e utilizzerà un tag in stile CSS per modificare un pulsante in un file HTML.
Abbiamo aperto il tag di stile e abbiamo iniziato a personalizzare il parametro del pulsante. Abbiamo usato il codice di riferimento HTML per fornire il colore dello sfondo del pulsante. Quindi, abbiamo dato al pulsante un bordo scrivendolo come una parola chiave e dandogli tre proprietà: "4px", che è la dimensione del bordo; "Punted", che è la forma del bordo; e "nero", che è il colore del bordo.
Quindi, abbiamo aggiunto imbottitura, allineamento del testo, impostazioni di visualizzazione e dimensioni del carattere al pulsante per renderlo più regolare browser e evidente. Lo stile e le etichette della testa sono state quindi chiuse. Il prossimo è il tag del corpo. Abbiamo usato il tag H1 per fornire una voce alla nostra pagina HTML e quindi abbiamo aperto il tag del pulsante nel tag del corpo. Abbiamo scritto del testo che apparirà sul pulsante in questo tag. Dopodiché chiuderemo entrambi i tag e salveremo questo script in ".Formato HTML "in modo che possiamo eseguirlo sul nostro browser.
Otterremo l'output sopra dopo aver eseguito lo script nel nostro browser. Lo snippet mostra che il pulsante ha un bordo tratteggiato nero come definito nel tag di stile nell'intestazione del file.
Esempio 03: Utilizzo di CSS per dare a un pulsante un bordo a taglio tondo solido in un file HTML
In questo esempio, useremo i tag in stile CSS per modificare l'aspetto di un pulsante in un file HTML. Creeremo un bordo solido con angoli rotondi e un po 'di colore per distinguere il pulsante predefinito dal primo piano e il resto della pagina.
Abbiamo aperto il tag di stile nello script sopra e abbiamo iniziato a modificare un parametro del pulsante nell'intestazione del file HTML. Quindi, abbiamo dato al pulsante un bordo scrivendolo come una parola chiave e assegnandola tre proprietà: "4px", che è la dimensione del bordo; "Solido", che è la forma del bordo; e "nero", che è il colore del bordo. Quindi, abbiamo aggiunto un'altra proprietà di confine chiamata Border-Radius e il suo valore è assegnato in pixel per arrotondare i bordi di confine. Abbiamo quindi chiuso lo stile e le etichette della testa prima di passare al tag del corpo. Abbiamo scritto un po 'di testo tra i tag del pulsante che appariranno sul pulsante.
Come mostra l'uscita sopra, il bordo del pulsante ha bordi arrotondati e tutto l'altro stile che abbiamo definito nell'intestazione del file.
Esempio 04: Utilizzo di CSS in linea per aggiungere un bordo a un pulsante in un file HTML
In questo esempio, useremo lo stile CSS in linea su un pulsante per dargli un bordo in un file HTML. Tutto lo styling che verrà eseguito sul pulsante verrà dato all'interno del tag pulsante.
Nella sceneggiatura sopra, faremo tutto lo styling nel corpo del file. Innanzitutto, apriremo il tag H1 per dare una voce alla pagina. Quindi apriremo il tag pulsante. In questo tag, definiremo lo stile del pulsante. Inizieremo lo stile con la parola chiave bordo e inizieremo a dargli proprietà diverse come dimensioni, forma, colore, imbottitura e allineamento. Dopo questo, abbiamo chiuso il tag e abbiamo scritto il testo che apparirà sul pulsante. Quindi, abbiamo chiuso tutti i tag ed eseguito questo file per ottenere l'output di seguito:
Come possiamo vedere nell'output, il pulsante ha tutto lo styling che abbiamo fornito nel tag del pulsante e abbiamo aggiunto correttamente un bordo a un pulsante utilizzando CSS in linea.
Esempio 05: usando CSS per dare un doppio bordo a un pulsante in un file HTML
Aggiungeremo un doppio bordo a un pulsante in questo esempio. Lo script verrà sviluppato in Notepad ++ e utilizzerà un metodo Tag Style CSS per modificare un pulsante in un file HTML.
Abbiamo aperto il tag di stile e abbiamo iniziato a modificare un elemento pulsante nell'intestazione del file HTML. Il bordo è stato quindi aggiunto al pulsante scrivendolo come una parola chiave e assegnandolo tre proprietà: "10px", le dimensioni del bordo; "Double", la forma del bordo; e "nero", il colore del bordo.
Il pulsante ha tutti gli stili dal tag di stile e abbiamo applicato con successo un bordo a un pulsante usando CSS.
Conclusione
In questo articolo, abbiamo discusso del bordo di un pulsante usando CSS in un file HTML. Il pulsante predefinito di un browser di solito non ha uno stile ed è solo un semplice quadrato bianco. Quindi, usiamo CSS per modellare questo elemento e renderlo adattabile alla pagina HTML. In questo articolo, abbiamo discusso di diversi esempi in cui abbiamo aggiunto un bordo a un pulsante usando approcci diversi e tutti questi esempi sono stati implementati nel blocco note++.