Nei documenti HTML, l'utente può utilizzare elementi diversi, come tabelle, moduli, campi di testo, immagini e pulsanti. I pulsanti sulle pagine Web vengono utilizzati per eseguire qualsiasi azione o per generare qualsiasi evento su un pulsante Fare clic su. Può anche essere utilizzato per richiedere qualsiasi altra pagina web. Sviluppatori Incorporare pulsanti su pagine Web in diversi stili e forme.

Questo tutorial dimostrerà:

• Come creare/creare un pulsante in HTML?
• Come creare/creare un pulsante Circle utilizzando CSS Properties?

Come creare/creare un pulsante in HTML?

Se l'utente desidera creare un pulsante in HTML, prova le istruzioni fornite.

Passaggio 1: crea un contenitore di div

Innanzitutto, usa il “"Elemento per creare un contenitore" div ". Inoltre, aggiungi un "id"Attributo con un valore specifico in base alle tue preferenze.

Passaggio 2: inserire l'intestazione

Successivamente, inserisci un titolo di livello uno usando il "

"Elemento. Quindi, incorporare il testo dell'intestazione tra "

"Tag.

Passaggio 3: Crea pulsante

Crea un pulsante in HTML utilizzando il "Tag insieme al "tipo"Attributo come"invia":

Pulsante CSS Circle

Invia

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

Ora, spostati verso la sezione successiva per fare la circolare del pulsante.

Come creare/creare un pulsante Circle utilizzando CSS Properties?

IL "raggio di confine"La proprietà viene utilizzata per creare il pulsante sotto forma di un cerchio. Questa proprietà imposta gli angoli degli elementi da ogni lato.

Per fare ciò, guarda la procedura passo-passo data.

Passaggio 1: contenitore "div" stile

Innanzitutto, accedi al "div"Container utilizzando il nome della classe"#Circle-Btn"E applica le seguenti proprietà CSS per lo styling:

#cerchio-btn
Altezza: 200px;
larghezza: 200px;
Margine: 50px;
imbottitura: 80px;
Bordo: 3px Solid RGB (23, 8, 228);
Background-color: Blanchedalmond;

Qui:

• IL "altezza"La proprietà viene utilizzata per specificare l'altezza dell'elemento.
• "larghezza"Definisce la dimensione dell'elemento orizzontale.
• "margine"Viene utilizzato per allocare lo spazio all'esterno del bordo definito.
• "imbottitura"Specifica lo spazio all'interno del confine.
• "confine"Assegna un limite attorno all'elemento.
• "colore di sfondo"La proprietà viene utilizzata per specificare il colore sul retro dell'elemento.

Produzione

Passaggio 2: crea il pulsante Circle

Ora, accedi al pulsante per nome del tag e applica le proprietà fornite sul pulsante per renderlo circolare:

Button
blocco di visualizzazione;
Altezza: 150px;
larghezza: 150px;
raggio di frontiera: 50%;
bordo: 1px rosso solido;

La descrizione del codice sopra è la seguente:

• IL "Schermo"La proprietà CSS viene utilizzata per specificare il comportamento di visualizzazione dell'elemento, ad esempio se l'elemento è un blocco o in linea.
• "raggio di confine"La proprietà viene utilizzata per impostare i bordi degli elementi rotondi da tutti i lati. Nel nostro scenario, il valore di questa proprietà è impostato come "50%"Per rendere il pulsante rotondo da tutti i lati.

Si può notare che il pulsante Circle è stato creato correttamente:

Passaggio 3: applicare l'effetto "Hover" sul pulsante

Applicare il "molare"Pseudo classe per aggiungere l'effetto hover sul pulsante:

Button: Hover
Colore: RGB (247, 274, 248);
Background-color: CadetBlue;

Sul "Pulsante: hover", La proprietà CSS"colore di sfondo"È utilizzato per impostare il colore dello sfondo e"colore"Viene utilizzato per specificare il colore del testo.

Produzione

Hai imparato il metodo per la creazione di un pulsante Circle in CSS.

Conclusione

Per creare un pulsante Cerchio in CSS, prima crea un pulsante semplice utilizzando il “"Tag in HTML. Quindi, applica il "raggio di confine"Proprietà che imposta i bordi dell'elemento da tutti i lati. Il valore del "raggio di confine" è specificato come "50%"Per preparare il pulsante circolare. Questo post ha spiegato la procedura per creare il pulsante Circle in CSS.