Se si desidera attirare l'attenzione di un pulsante di ricerca sul tuo sito Web, non devi farlo lampeggiare rossi brillante colori per catturare l'attenzione di un visitatore del sito. Pulsanti di ricerca--utilizzati per trovare contenuti all'interno di un sito Web o su Internet - appaiono spesso in posizioni prominenti nella parte superiore di una pagina. Per trasformare i pulsanti ricerca ordinaria in interessanti opere d'arte, aggiungere attributi CSS per i pulsanti e farli apparire come più che ti piace.

Istruzioni

1

Aprire un documento di pagina Web che contiene un pulsante di ricerca. Individuare la sezione del corpo del documento e trovare il tag di input che viene creato il pulsante. Che la prima parte del codice del tag sarà simile al codice riportato di seguito:

< input type = "button"

Aggiungere il seguente testo dopo "pulsante":

classe = "newSearchButton"

Dopo l'aggiunta di tale classe, il codice verrà visualizzato come segue:

< tipo input = "button" class = "newSearchButton" value = "Cerca" / >

2

Passare alla sezione head del documento e incollare il codice CSS riportato di seguito quella sezione:

< style type = "text/css" >
.newSearchButton
{
Altezza: 50px; Larghezza: 100px; padding: 4px;
colore: rosso; background-color: giallo;

Questo codice crea la classe CSS newSearchButton e definisce alcuni attributi. Questi attributi influenzano l'aspetto del pulsante in modi diversi. I valori per altezza e larghezza controllano la dimensione del pulsante. I valori qui riportati sono in pixel. Altezza del pulsante, ad esempio, è di 50 pixel. L'attributo padding determina quanto il testo del pulsante viene visualizzato dai bordi del pulsante. Gli attributi di colore e colore di sfondo impostato il colore di primo piano e sfondo.

3

Aggiungere il testo riportato di seguito dopo il testo indicato nel passaggio precedente:

border-style: dashed; border-width: 3px; border-color: Blue;
font-weight: bold; font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
< / stile >

Questo codice consente di aggiungere attributi aggiuntivi. I tre attributi sulla prima riga impostato lo stile del bordo, spessore e il colore del pulsante. Gli attributi sulla seconda riga definiscono il tipo di carattere del pulsante. In questo esempio, lo spessore del carattere è in grassetto e il suo stile è in corsivo. L'ultima riga definisce i tipi di carattere che si desidera il pulsante da utilizzare. Specificare più di un nome per l'attributo font-family. Se il browser di un utente non può rendere il primo tipo di carattere nell'elenco - Arial, in questo caso..--il browser tenta di utilizzare uno dei altri font nell'elenco.

4

Salvare il documento e avviare il browser per la visualizzazione come pagina Web. Il tuo nuovo pulsante apparirà nella pagina di visualizzazione degli attributi definiti nel file CSS.

Consigli & Avvertenze

• Il numero di stili possibili pulsanti è quasi infinito a causa del numero di attributi che è possibile impostare. Modificare valore dello stile bordo di incasso e la larghezza del bordo a 10px e l'aspetto del pulsante cambia radicalmente. Acquisisce un bordo spesso e tridimensionale con una leggera ombra sui suoi bordi superiore e sinistro. Continuare ad assegnare valori diversi ai diversi attributi e visualizzare le modifiche in un browser. Accidentalmente, si può scoprire un suggestivo effetto che aggiunge solo il giusto tocco di rifinitura che cerchi.