Come fare un pulsante di collegamento in CSS

April 25

Come fare un pulsante di collegamento in CSS


pulsanti sito sono tradizionalmente creato in un'applicazione grafica, ma si ha la possibilità di utilizzare Cascading Style Sheets (CSS) per eseguire questa operazione. CSS ti dà la possibilità di creare regole che disegnano il vostro link in modo da apparire esattamente come i pulsanti. Una volta che il collegamento è codificato in HyperText Markup Language (HTML), è possibile assegnare la regola CSS per il codice, che bypassa la necessità per le immagini.

istruzione

1 Aprire un documento sito web nel vostro programma di editor di testo. Posizionare il cursore prima del tag di chiusura </ head> e digitare il seguente codice CSS:

<Style type = "text / css">

un bottone { }

</ Style>

La voce "a.button {}" crea una regola di stile che gestisce i pulsanti di collegamento sulla tua pagina.

2 Invio "border:;" tra le parentesi graffe e digitare un valore numerico in pixel (px) per specificare la larghezza del bordo intorno al pulsante di collegamento. Inoltre, digitare uno stile di bordo, come ad esempio "cresta" o "fin dall'inizio", per creare una struttura che appare tridimensionale. Per esempio:

a.button {border: 4px cresta; }

3 Tipo "padding:;" e immettere un valore di pixel per specificare la quantità di spazio bianco tra il testo del pulsante e il contorno. Inoltre, digitare "font:;" e digitare un dimensione dei pixel e tipo di carattere per il testo del pulsante. Il tuo codice CSS completo ora simile al seguente esempio:

a.button {border: 4px cresta;

font: 12px arial, sans-serif; }

4 Posizionare il cursore dove si desidera che il pulsante di collegamento di apparire e digitare il codice di ancoraggio che crea un collegamento:

<a href="URL indirizzo here"> Testo pulsante </a>

5 Inserire "class =" all'interno dell'elemento di ancoraggio di apertura e di tipo "pulsante" tra virgolette per assegnare la regola CSS che gli stili tuo link come un pulsante. Il codice HTML finito ora assomiglia a questo:

<a href="URL affrontare here" class="button"> Testo pulsante </a>

6 Salvare il file.