Come creare un pulsante HTML che si comporta come un collegamento

In HTML, il componente del pulsante esegue determinate attività, come un pulsante di collegamento che può essere utilizzato per navigare sull'altra pagina in base alla necessità. Inoltre, con l'aiuto di CSS, gli utenti possono cambiare le dimensioni del pulsante, la forma, il colore, la larghezza, l'altezza e molti altri aspetti. Il pulsante può essere progettato con più proprietà in conformità con la necessità.

Questo blog dimostrerà le istruzioni per la creazione di un pulsante HTML che si comporta come un link.

Come creare un pulsante HTML che si comporta come un collegamento?

Dai un'occhiata alla procedura di seguito per la creazione di un pulsante di collegamento HTML.

Passaggio 1: crea un div

Nel corpo HTML principale, crea un contenitore di div e specifica il nome della classe come "Btn-Area".

Passaggio 2: crea collegamento per il pulsante

Successivamente, definisci il “UNTag e il "Href"Elemento, che indica l'URL di destinazione in cui l'utente verrà navigato dopo aver fatto clic sul pulsante.

Passaggio 3: assegna la classe del pulsante

Ora crea un pulsante e specifica la sua classe. Ad esempio, definire la classe dei pulsanti come "Link-Button"E aggiungi il testo tra"pulsante"Tag come abbiamo aggiunto"Visita Linuxhint".

Dopo aver impostato il pulsante, chiudere "" E ""Tag.

Ecco il blocco di codice per lo scenario discusso:

Visita Linuxhint

Ora, vai avanti verso lo styling del pulsante.

Come modellare un pulsante con CSS che si comporta come un collegamento?

Per modellare un pulsante con CSS che si comporta come un link, controlla le istruzioni fornite.

PASSAGGIO 1: BUTTONE DI LINK STANI

STILIO Il pulsante definendo i seguenti attributi in "Link-Button" classe:

• • IL "colore di sfondoLa proprietà "viene utilizzata per specificare il colore come"bisque".
  • Imposta imbottitura come "10px", Che viene utilizzato per regolare la spaziatura delle cellule.
  • Il raggio di confine è impostato come "8px"Per arrotondare gli angoli del bordo esterno dell'elemento.
  • Il box-shadow sarà impostato come "1px, 2px, 1px, 2px"Con il colore"grigio".
  • Imposta la proprietà del margine come "5px " Per spaziatura top e pulsanti e "100px"Per la spaziatura destra e sinistra.
  • Il confine è impostato come "1px Solid #CE7777":

.Link-Button
Background-color: bisque;
imbottitura: 10px;
raggio di frontiera: 8px;
box-shadow: 1px 2px 1px 2px grigio;
Margine: 5px 100px;
Border: 1px Solid #CE7777;

Passaggio 2: Imposta larghezza del pulsante

".Btn-Area"La classe viene utilizzata per accedere al contenitore DIV che imposterà la larghezza del pulsante come"500px"E la proprietà del margine come"auto"Che regola automaticamente il margine attorno all'area del pulsante:

.btn-area
larghezza: 500px;
Margine: auto;

Si può osservare che il pulsante è stato disegnato correttamente:

Abbiamo spiegato il metodo per la creazione e lo styling del pulsante HTML che si comporta come un collegamento.

Conclusione

Per creare un pulsante HTML che agisca come un collegamento, prima di tutto, crea un contenitore di div e specifica la classe con il nome. Successivamente, definisci il “Tag insieme al "Href"Attributo per incorporare il collegamento. Quindi, crea un pulsante e assegna la classe e il nome del pulsante. Successivamente, modella il pulsante di collegamento applicando le proprietà CSS alle classi definite. Questo post ha dimostrato l'approccio più semplice per la creazione di un pulsante HTML che agisce come un link.