Come fare Button Link per un sito web

June 9

Come fare Button Link per un sito web


Se qualcuno ti chiede di delineare un pulsante Web su carta, si potrebbe disegnare un rettangolo e scrivere un testo al suo interno. I browser sanno creare pulsanti quando si aggiungono i tag pulsante per documenti HTML. Un modo per rendere una pagina Web è quello di cambiare il modo in cui appaiono i link. Per esempio, se si desidera un collegamento a guardare come un pulsante stilizzata, usare i CSS per modificare l'aspetto del collegamento.

Formattare il tag di ancoraggio

classi CSS creano gran parte della magia visiva che si vede su Internet. Scegliere l'attributo CSS a destra, e si può fare qualsiasi cosa, da mettere un bordo punteggiato intorno a un punto di aggiungere un'immagine di sfondo a un pulsante. Iniziare a personalizzare uno dei tag di ancoraggio, rendendo il suo codice HTML simile al seguente:

<a class="linkButton" href="Visit" rel="nofollow" target="_blank"> http: //www.someWebSite.com&quot;> Visita il nostro Store </a>.

Sostituire http://www.someWebsite.com con l'URL del sito che desideri la gente a visitare quando fanno clic sul pulsante di collegamento. Cambiare "Visita il nostro negozio" al testo che desideri il tuo link da visualizzare.

Aggiungere attributi CSS

Creare la classe linkButton che il tag di ancoraggio riferimenti incollando il seguente codice nella sezione stile del documento HTML o in un foglio di stile esterno i riferimenti del documento:

.linkButton {display: block; text-align: center; vertical-align: middle; padding: 10px; width: 110px; Altezza: 30px; border-style: solido; border-color: blue; colore: viola; background-color: yellow; }

Questo codice imposta lo stile di visualizzazione del collegamento per bloccare, allinea il suo testo, imposta imbottitura attorno al testo per 10 pixel e regola larghezza e l'altezza del pulsante. Questi valori sono 110 pixel e 20 pixel.

Regolare CSS valori di attributo

Modificare uno dei valori degli attributi nella linkButton per ottenere l'effetto desiderato. Padding si riferisce alla quantità di spazio tra il testo del link e bordi adiacenti. Aumentare il valore per aumentare l'imbottitura e ridurre il valore per ridurre l'imbottitura. Gli attributi border-style e border-color impostare lo stile del bordo del pulsante e il colore. Altri valori possibili per border-style includono punteggiato, tratteggiato e doppio.

Visualizza il pulsante di collegamento

Salvare il documento HTML, visualizzare in un browser e vedrete un pulsante con uno sfondo giallo e il testo viola. confine del pulsante è blu e le sue dimensioni sono i valori impostati per l'altezza e la larghezza. Fare clic sul pulsante e il browser naviga verso la URL impostato per l'attributo href del tuo link.

Portare sugli effetti speciali

Come collegamenti regolari, pulsanti di collegamento possono alterare il loro aspetto quando si interagisce con loro. CSS pseudo-classi che rendono possibile. Aggiungere le seguenti pseudo-classi alla sezione stile del documento HTML:

a: visited {background-color: rosa;}
a: hover {background-color: verde chiaro;}

a: active {background-color: arancione;}.

La pseudo-classe visitato cambia colore di sfondo del pulsante di collegamento al rosa dopo qualcuno visita il link. La pseudo-classe hover cambia colore di sfondo del pulsante di collegamento al verde chiaro quando si passa il mouse sul pulsante. Infine, la pseudo-classe visitato cambia colore di sfondo del pulsante di collegamento a breve arancione quando un visitatore del sito fa clic sul pulsante. Modificare gli attributi per queste classi a seconda delle necessità. Per esempio, se si desidera che la larghezza del pulsante di collegamento per passare a 200 pixel e il suo background-color per cambiare a verde chiaro su un evento hover, aggiungere un attributo width per l'hover pseudo-classe, come illustrato di seguito:

a: hover {background-color: verde chiaro; width: 200px;}

Immagini e pulsanti di collegamento

testo del link è utile perché consente di sapere dove Link si giunge prima di fare clic di esso. In questo esempio, i visitatori del sito vedere "Visita il nostro Store" come testo del pulsante di collegamento. Tuttavia, è possibile utilizzare un'immagine come sfondo del pulsante di collegamento. Che immagine apparirà dietro il testo normale del pulsante. Aggiungere una immagine di sfondo per il vostro pulsante di collegamento incollando il seguente codice CSS alla fine della classe linkButton:

fondo: url (IMAGE_URL);
background-size: 70px 50px;
background-repeat: no-repeat;

Sostituire IMAGE_URL con l'URL di un'immagine su Internet o sul server Web. Sostituire 70px 20px e con la larghezza e l'altezza vuoi l'immagine di essere. Assicurarsi che l'immagine è abbastanza piccolo da stare all'interno del pulsante. È inoltre possibile utilizzare un programma di modifica delle immagini, come ad esempio Microsoft Paint. Paint.Net o Pixlr.com, per disegnare qualsiasi immagine.

Consigli immagine

L'attributo background-size ridimensiona l'immagine in base ai valori impostati per background-size. Anche se questo funziona, la pagina Web verrà caricato più velocemente se si ridimensiona l'immagine manualmente utilizzando il programma di editing di immagini. Consultare la documentazione delle applicazioni Aiuto se hai bisogno di assistenza per imparare a ridimensionare un'immagine.