Pulsante Javascript Css

| | | | | | | |

Durante la progettazione di un sito web avrai spesso un pulsante che vuoi che appaia in un certo modo. Ad esempio, potresti volere che un pulsante abbia un colore di sfondo rispetto ad altri elementi della pagina per attirare l`attenzione dell`utente sul pulsante.

Utilizzando CSS, gli sviluppatori possono creare pulsanti con stili. CSS ti permette di cambiare tra le altre cose.

colore, dimensione del testo, bordo, larghezza e altezza di un pulsante. Questo tutorial discuterà, con esempi, come usare una serie di proprietà CSS per dare uno stile a un HTML pulsante. Quando finirai di leggere questo tutorial, sarai un esperto nello stile dei pulsanti usando i CSS.

Panoramica dei pulsanti

Puoi definire un pulsante in diversi modi HTML. I due approcci più comuni sono Trova la tua corrispondenza Bootcamp

Se vogliamo dare uno stile al nostro pulsante, in altre parole, per personalizzare l`aspetto della pagina, dobbiamo usare css In questo articolo, discuteremo come fare quanto segue su un pulsante: ..

  • Cambia il colore di sfondo
  • Cambia il colore del testo
  • Cambia le dimensioni del testo.
  • Aggiungi padding.
  • arrotondare gli angoli.
  • Aggiungere un bordo colorato.
  • Usalo: .... funzione al passaggio del mouse
  • Aggiungi ombra
  • Cambia larghezza
  • Disattiva
  • Animalo.

Discuteremo anche come creare gruppi di pulsanti orizzontali e verticali.

Back - Colore piano

Durante la progettazione di un pulsante, la prima cosa che potresti voler fare è impostare un colore di sfondo - pianificare il pulsante. Per impostazione predefinita, un pulsante ha uno sfondo bianco e testo nero Usando il colore di sfondo CSS, c e cambiare il colore di sfondo di un pulsante.

Supponiamo che tu stia progettando un pulsante per un sito Web e desideri che il pulsante abbia uno sfondo rosa. Possiamo cambiare il colore del nostro pulsante usando il seguente codice CSS:

Il nostro codice restituisce:

Screen Shot 2020 04 dal 03 al 13.10.32

Utilizzando la proprietà del colore di sfondo, abbiamo cambiato il colore di sfondo del nostro pulsante in rosa. Possiamo cambiare il colore di sfondo del nostro pulsante in un colore usando questa proprietà.

Colore testo

Per cambiare il colore del testo di un pulsante puoi usare il color property. un pulsante e vogliamo che il pulsante abbia uno sfondo rosa e il testo in verde. Potremmo creare questo pulsante utilizzando il seguente codice:

Il nostro codice Restituisce:

 ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 usiamo nella figura verde <x> 8gy> 8gy>> usiamo la proprietà MxzPG8cvG2: per impostare il colore del testo in ou r pulsante verde.</p><h2>Dimensione testo</h2><p>Puoi utilizzare la proprietà CSS font-size per impostare la dimensione del testo in un pulsante. Diciamo che vogliamo che il testo abbia una dimensione del carattere di 20px. Possiamo ottenere ciò utilizzando il codice seguente:</p> <p>Il nostro codice restituisce:</p><figure class = Screen Shot 2020 03 25 A 33.08.23

Il nostro pulsante ha le stesse dimensioni di prima, ma ora la dimensione dei caratteri all`interno è 20px. Abbiamo utilizzato l`attributo della dimensione del carattere per impostare la dimensione del testo nel nostro pulsante.

Padding

Durante la progettazione di un pulsante, potresti decidere che desideri una certa quantità di spazio tra il testo all`interno di un pulsante e le pareti esterne del pulsante. È qui che entra in gioco la proprietà di ammortizzazione.

La proprietà di riempimento utilizza indicatori di lunghezza (px, em e e così via ) o valori percentuali ‚Äã‚Äãper definire una certa quantità di spazio tra i pulsanti di testo e i suoi bordi.

Supponiamo di voler creare due pulsanti nella nostra pagina. Un pulsante dovrebbe avere un riempimento di 40px e l`altro dovrebbe avere un riempimento di 20px. Possiamo creare questi pulsanti usando il seguente codice:

Il nostro codice restituisce:

 Screenshot 2020 03 25 to 08.39.39

Puoi usare la proprietà border-radius per creare pulsanti rettangolari con angoli arrotondati. Di seguito sono riportati tre esempi di codice che utilizzano la proprietà border-radius. Per illustrare l`effetto delle diverse dimensioni del raggio, ogni esempio utilizza un raggio del bordo di dimensioni diverse.

Il nostro codice restituisce:

 Screen Shot 2020 03 25 at 08.49.42