Nello sviluppo web, i pulsanti sono i componenti chiave che consentono l'interazione dell'utente con il sito Web. I pulsanti possono migliorare l'esperienza degli sviluppatori e portare più entrate al business. Inoltre, i pulsanti aiutano gli sviluppatori a navigare nel prodotto perché richiedono agli utenti di convertire i risultati desiderati.

In questo articolo, dimostreremo:

• Come creare/creare un pulsante in HTML?
• Come modellare il pulsante Clicked in CSS?

Come creare/creare un pulsante in HTML?

Per creare/creare un pulsante in HTM, HTML ""L'elemento viene utilizzato. Per una dimostrazione pratica, è necessario verificare le istruzioni fornite.

Passaggio 1: crea un contenitore "div"

Inizialmente, fai un "div"Container inserendo un""Elemento. Quindi, assegna un attributo di classe e alloca un nome per un ulteriore utilizzo.

Passaggio 2: inserire un'intestazione

Quindi, utilizzare il tag di intestazione HTML per inserire un'intestazione. Gli utenti possono utilizzare qualsiasi tag di intestazione da "

" al "

"Tag. In questo scenario, il "

Passaggio 3: crea un pulsante

Successivamente, crea un elemento pulsante con l'aiuto di ""Elemento. Quindi, specifica il pulsante "tipo" COME "invia"E incorporare un po 'di testo tra il tag del pulsante da visualizzare sul pulsante:

Pulsante clic sullo stile

Fai clic sul pulsante

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

Passa verso la sezione successiva per conoscere lo styling del pulsante cliccato.

Come modellare un pulsante cliccato in CSS?

Esistono diverse classe pseudo, tra cui ": Hover" E ":messa a fuoco"Utilizzato con elementi di bottoni. Inoltre, l'utente può anche applicare le varie proprietà CSS su un pulsante per lo styling.

Per modellare un pulsante cliccato in CSS, prova la seguente procedura.

Passaggio 1: contenitore "div" stile

Accedi al "div"Container utilizzando il selettore degli attributi e l'attributo. Per farlo, il ".btn-container"È usato per questo scopo:

.btn-container
Margine: 60px;
imbottitura: 20px 40px;
Bordo: 3px punteggiato RGB (47, 7, 224);
Altezza: 150px;
larghezza: 200px;
ALIGE-ITMS: CENTRO;

Secondo lo snippet di codice dato:

• "margine"La proprietà aiuta ad aggiungere lo spazio vuoto attorno al confine dell'elemento.
• "imbottitura"Viene utilizzato per specificare lo spazio all'interno dell'elemento.
• "altezza" E "larghezza"Proprietà alloca la dimensione per un elemento definito.
• "allineare"È utilizzato per l'impostazione dell'allineamento dell'elemento all'interno dell'elemento.

Produzione

Passaggio 2: elemento del pulsante di stile

Accedi all'elemento pulsante con l'aiuto di "pulsante"E applicare le proprietà indicate sotto lo snippet del codice:

pulsante
filtro: drop-shadow (5px 8px 9px rgb (42, 116, 126));
Altezza: 50px;
larghezza: 100px;
Background-color: giallo;

Qui:

• "filtro"La proprietà viene utilizzata per applicare l'effetto visivo sull'elemento definito. Per fare ciò, il valore di questa proprietà è impostato come "Drop-Shadow", Che viene utilizzato per specificare l'ombra sull'elemento.
• "colore di sfondo"Viene utilizzato per allocare il colore sul retro dell'elemento. Ad esempio, il valore di questo è specificato come "giallo".

Produzione

Passaggio 3: stile con “: hover” selettore

Ora, accedi all'elemento pulsante lungo il selettore pseudo, che viene utilizzato per selezionare elementi quando il mouse utente su di essi:

Button: Hover
Background-color: RGB (238, 7, 7);

Per farlo, il "colore di sfondoLa proprietà "viene utilizzata con il valore"RGB (238, 7, 7)". Questo colore verrà visualizzato solo quando l'utente si libra sul pulsante.

Produzione

Passaggio 4: stile con ": focus" selettore

Ora, utilizza il ":messa a fuoco"Pseudo Selettore lungo l'elemento pulsante, che viene utilizzato per applicare lo stile sull'elemento selezionato quando l'utente è mirato dalla tastiera o focalizzato dal mouse:

Button: Focus
Background-color: blu;

In questo scenario, il "colore di sfondo"È usato con i valori impostati come"blu".

Hai imparato il metodo per lo styling del pulsante cliccato in CSS.

Conclusione

Per modellare il pulsante cliccato in CSS, prima crea un pulsante in HTML con l'aiuto di ""Elemento. Quindi, accedi ai selettori pseudo del pulsante, come ": Hover "e": Focus"E applicare le proprietà CSS, tra cui"altezza "," larghezza "," filtro "," colore di sfondo", e molti altri. Questo post riguardava lo styling del pulsante Clicked in CSS.