L'aggiunta di effetti speciali e interazioni di pulsanti sul Web aiuta chiamata all'utente attenzione alle azioni, come iscrizioni o acquisti. Dal momento che i disegni dei pulsanti influenzano il comportamento degli utenti a tal punto, come si progetta pulsanti fa una grande differenza nel modo efficace il vostro disegno diventerà. Glow effetti, per esempio, può catturare l'attenzione del visitatore del sito, ed è possibile creare questo effetto utilizzando una riga di CSS (Cascading Style Sheet) del codice. Utilizzando i CSS, si può anche fare il bagliore appare solo quando l'utente posiziona il cursore sopra il pulsante.

istruzione

1 Aprire la pagina Web in Blocco note e individuare il codice del pulsante. A seconda della sua funzione e la posizione sulla pagina, il codice sarà o utilizzare un "<button>" tag "<input>" tag o, con il primo è più comune all'interno di moduli Web. Ottenere il nome ID del tag del pulsante oppure aggiungere un ID:

<Input type = "submit" id = "myButton" />

<Button id = "myButton"> pulsante Text </ button>

2 Vai all'inizio del codice per la pagina Web e cercare "<style>" tag. Aggiungeteli al di sotto del "<link>" o "<title>" tag se non si vede alcun:

<Style type = "text / css">

</ Style>

Scrivere il codice di stile tra i "<style>" tag o in un file CSS esterno se il vostro sito web utilizza già uno.

3 Scrivere il codice per rendere il vostro pulsante bagliore attorno ai suoi bordi:

myButton {

box-shadow: 0 0 20px rgba (255,255,0,0.3);

}

Il codice di cui sopra aggiunge un'ombra al pulsante, ma dal momento che sia la parte superiore e sinistra offset sono impostati a zero pixel, diventa un'ombra che avvolge l'intero pulsante. Modificare il terzo valore per la quantità di sfocatura che si desidera, con numeri più alti producono una maggiore sfocatura. Il codice "RGBA ()" assume valori di colore rosso, verde e blu più un livello di trasparenza. Questo esempio utilizza set di giallo per la trasparenza del 30 per cento.

4 Rendere il bagliore visualizzati solo su un hover o stato "roll-over" con l'aggiunta del ": hover" pseudo-classe dopo il nome ID del pulsante:

myButton: hover {

box-shadow: 0 0 20px rgba (255,255,0,0.3);

}

Consigli e avvertenze

• Aggiungere "inserto" davanti al primo valore per "box-ombra" per rendere il bagliore apparire all'interno del pulsante piuttosto che sui bordi.
• Stile di sfondo del pulsante, colore e font prima di aggiungere un effetto di bagliore, altrimenti non può apparire il bagliore, soprattutto quando la luce è nel riquadro.