Semplice pulsante Call To Action con CSS e jQuery

Chiamare all'azione in web design è un termine usato per elementi in una pagina web che sollecita un'azione da parte dell'utente (cliccando, passando con il mouse, ecc.). Oggi lo faremo crea un pulsante di invito all'azione efficace e fantastico con alcuni CSS e jQuery che attira l'attenzione dell'utente e lo induce a fare clic .

In questo tutorial spiegheremo ogni riga del codice usato con i dettagli e speriamo che possa essere utile per te. Utilizza il seguente tutorial HTML, CSS e jQuery con livello di difficoltà Principiante e un tempo stimato di completamento di 45 minuti.

Scarica Tutorial (.zip) o dimostrazione

Parte I - Creare l'immagine del pulsante

In questa prima parte ti mostreremo come creare le immagini necessarie con Photoshop in semplici semplici passaggi. Iniziamo.

Crea un nuovo documento Photoshop con una larghezza di 580 px e un'altezza di 130 px. Vai a vista > Nuova guida quindi, imposta il Orientamento a Orizzontale e il Posizione a 65px.

Crea più guide; ciascuno per la parte superiore, inferiore, sinistra e destra. La tua immagine dovrebbe avere queste seguenti guide una volta che hai finito:

Le guide sembrano dividere la tua tela nelle due metà superiore e inferiore. Seleziona il Strumento rettangolare arrotondato, impostare il Raggio a 5px e disegna una forma rettangolare nella metà superiore della tela.

Cambia gli stili per Sovrapposizione sfumatura e Ictus.

Seleziona il genere Strumento e tipo “Scaricare” come testo di esempio nella casella che hai creato. Allinea il testo al centro del riquadro e il risultato dovrebbe essere simile a questo:

Abbiamo terminato la creazione del primo stato del pulsante di download. Diamo crea un nuovo gruppo e sposta tutti gli strati in esso. Duplica il gruppo e quindi posizionarlo sotto il primo gruppo. abbiamo creato.

Dirigetevi verso il gruppo duplicato e cambiate il Sovrapposizione sfumatura e Ictus stile della nostra seconda scatola rettangolare (quella stazionaria) con i seguenti settaggi:

Con il secondo gruppo selezionato, utilizzare Mossa strumento per spostare l'intera scatola rettangolare fino alla seconda metà della tela.

Questo è tutto! Abbiamo finito con la prima parte. Salva la tua immagine come Download.png e accendi il tuo editor di codice preferito.

Scarica PSD

Parte II - L'HTML

Passaggio 1: preparare i file necessari

Crea una cartella e dagli un nome. Lo nomineremo jQueryCallToaction per questo tutorial. Dentro jQueryCallToaction cartella, crea questi file / cartelle seguenti:

1. File HTML vuoto, index.html
2. File CSS vuoto, style.css
3. File JavaScript vuoto, script.js
4. Cartella, denominata "immagini"
5. Posto Download.png dentro immagini cartella.

Passaggio 2: collegamento index.html con CSS e JS

Colleghiamo il nostro CSS e JavaScript a index.html. Mettili dentro . Iniziamo con il File CSS:

poi il ultima versione di jQuery dal repository delle librerie AJAX di Google:

e infine il nostro File JavaScript :

Ora il nostro dovrebbe assomigliare a questo:

Mettiamo i codici per i nostri pulsanti all'interno tag:

Spiegazione: Abbiamo creato paragrafi per due pulsanti, ciascuno avvolto con con collegamento ipertestuale dentro. Linea 1: class = "button1" è posto all'interno , mentre Linea 2: class = "button1" è posto all'interno

 .button1 / * Solo pulsante con CSS * / background: url (images / download.png) 0 0; altezza: 65px; larghezza: 580px; blocco di visualizzazione; . button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; altezza: 65px; larghezza: 580px; blocco di visualizzazione; . button2 a background-position: 0 0;  

 $ (document) .ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0', 500); , function () $ (this) .stop (). animate ('opacity': '1', 500);););