Come impostare le dimensioni del pulsante

IL ""L'elemento aiuta gli utenti a generare eventi o ad intraprendere qualsiasi azione. I pulsanti possono anche essere utilizzati per l'invio del modulo e ottenere alcune informazioni. Gli utenti possono aggiungere qualsiasi tipo di pulsante alla pagina Web, inclusi pulsanti rotondi, quadrati, rettangoli e molti altri. Inoltre, gli utenti possono anche impostare le dimensioni del pulsante utilizzando i CSS "altezza" E "larghezza"Proprietà secondo la loro scelta.

Questo articolo indicherà:

• Come creare/creare un pulsante in HTML?
• Come impostare la dimensione del pulsante in HTML utilizzando CSS Proprietà?

Come creare/creare un pulsante in HTML?

Per fare un pulsante, prima di tutto, fare un "div"Container utilizzando il""Tag e inserendo un"id"Attributo con un valore specifico. Successivamente, aggiungi un ""Elemento e incorporare un po 'di testo da visualizzare su di esso:

Invia

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

Come impostare la dimensione del pulsante in HTML utilizzando CSS Proprietà?

Per impostare le dimensioni del pulsante, seguire la procedura menzionata.

Passaggio 1: contenitore "div" stile

In primo luogo, accedi al “id"Attributo con l'aiuto di"#"Selettore e nome ID"Size BTN". Quindi, applica le proprietà sotto l'elenco di seguito per lo styling:

#btn-size
Margine: 50px 150px;
Altezza: 100px;
larghezza: 100px;
imbottitura: 40px;
Bordo: 3px Solid RGB (23, 8, 228);
Background-color: RGB (245, 191, 111);

Qui:

• IL "margine"La proprietà viene utilizzata per allocare lo spazio al di fuori del confine dell'elemento.
• "altezza"Definisce la dimensione dell'altezza dell'elemento.
• "larghezza"Imposta le dimensioni della larghezza dell'elemento.
• "imbottitura"Assegna lo spazio all'interno del confine dell'elemento.
• "confine"Viene utilizzato per definire un limite attorno all'elemento.
• "colore di sfondo"È utilizzato per impostare il colore di sfondo sull'elemento definito.

Produzione

Passaggio 2: impostare la dimensione del pulsante

Ora, accedi al ""Elemento con l'aiuto del nome del tag e applicare le seguenti proprietà per impostare la dimensione del pulsante:

pulsante
Background-color: RGB (127, 235, 145);
Colore: RGB (184, 130, 238);
larghezza: 100px;
Altezza: 80px;
raggio di frontiera: 30%;

Nel codice sopra:

• IL "colore di sfondo"Viene utilizzato per impostare il colore di sfondo del pulsante.
• "colore"Specifica il colore del testo.
• "larghezza"Viene utilizzato per impostare la larghezza del pulsante. Ad esempio, abbiamo specificato il valore di larghezza come "100px".
• "altezza"Imposta l'altezza del pulsante come"80px"
• "raggio di confine"La proprietà definisce gli angoli dell'elemento arrotondato:

Passaggio 3: applicare la proprietà ": Hover" sul pulsante

Ora, applica il ": Hover"Classe pseudo insieme all'elemento pulsante per aggiungere l'effetto del mouse sul pulsante:

Button: Hover
Background-color: RGB (16, 185, 190);

Si può notare che l'effetto hover viene aggiunto al pulsante che cambia il colore del pulsante.

Conclusione

Per impostare le dimensioni del pulsante, prima, crea un pulsante con l'aiuto di ""Elemento. Quindi, accedi al pulsante in CSS per nome del tag e applica il “altezza" E "larghezza"Proprietà CSS per impostare le sue dimensioni. Inoltre, gli utenti possono anche applicare altre proprietà CSS, tra cui "colore""RADIO PUBLICA" E "colore di sfondo"Per lo styling. Questo post ha dimostrato la procedura per impostare le dimensioni del pulsante.