Simplu buton Apelați la acțiune Cu CSS & jQuery

Apel la acțiune în designul web este un termen folosit pentru elemente dintr-o pagină web care solicită o acțiune de la utilizator (clic, plasare, etc). Azi vom pleca creați un buton eficient și minunat de chemare la acțiune cu unele CSS și jQuery care atrage atenția utilizatorului și îl atrage să facă clic .

În tot acest tutorial vom explica fiecare linie de cod utilizat cu detalii și sperăm că va fi util pentru dvs. Următorul tutorial folosește HTML, CSS și jQuery cu nivel de dificultate Începător și un timp estimat de finalizare 45 de minute.

Descărcați Tutorial (.zip) sau Demo

Partea I - Creați imaginea butonului

În această primă parte vă vom arăta cum să creați imaginile necesare cu Photoshop în pași simpli simpli. Să începem.

Creați un nou document Photoshop cu o lățime de 580 de pixeli și o înălțime de 130 de pixeli. Mergi la Vedere > Ghid nou apoi, setați Orientare la Orizontală si Poziţie la 65px.

Creați mai multe ghiduri; fiecare pentru partea de sus, de jos, stânga și dreapta. Imaginea dvs. ar trebui să aibă următoarele ghidaje după ce ați terminat:

Ghidurile par să vă împărțiți pânza în jumătăți de sus și de jos. Selectează Instrument rectangular rotunjit, Seteaza Rază la 5px și desenați o formă dreptunghiulară pe jumătatea superioară a pânzei.

Modificați stilurile pentru Gradient Overlay și Accident vascular cerebral.

Selectează Tip Instrumentul și tipul “Descarca” ca exemplu de text în cutia pe care ați creat-o. Aliniați textul la mijlocul casetei și ieșirea dvs. ar trebui să arate astfel:

Am terminat crearea primei stări a butonului de descărcare. hai creați un nou grup și mutați toate straturile în ea. Duplicați grupul și apoi poziționați-o sub primul grup. am creat.

Treceți la grupul duplicat și schimbați-l Gradient Overlay și Accident vascular cerebral stilul celui de-al doilea cutii dreptunghiulare (cel plutind) cu urmatoarele setari:

Cu al doilea grup selectat, utilizați Mișcare pentru a muta întreaga cutie dreptunghiulară până la a doua jumătate a pânzei.

Asta e! Am terminat prima parte. Salvați imaginea ca download.png și aprinde editorul de cod preferat.

Descărcați PSD

Partea a II-a - HTML

Pasul 1 - Pregătiți fișierele necesare

Creați un dosar și dați-i un nume. O vom numi jQueryCallToaction pentru acest tutorial. Interior jQueryCallToaction folder, creați următoarele fișiere / foldere:

1. Blank HTML file, index.html
2. Fișier CSS gol, style.css
3. Fișierul JavaScript gol, script.js
4. Dosar, numit "imagini"
5. Loc download.png interior imagini pliant.

Pasul 2 - Legătura index.html cu CSS & JS

Să ne legăm CSS și JavaScript la index.html. Pune-le înăuntru . Începem cu Fișier CSS:

apoi ultima versiune a jQuery din depozitul Google AJAX Libraries:

și în cele din urmă Fișier JavaScript :

Acum, noi ar trebui să arate ceva de genul:

Să punem codurile butoanelor noastre înăuntru etichetă :

Explicaţie: Am creat paragrafe pentru două butoane, fiecare înfășurat cu hyperlink interior. Linia 1: class = "Button1" este plasat în interior , în timp ce linia 2: class = "Button1" este plasat în interior

 .buton1 / * Buton numai cu CSS * / background: url (images / download.png) 0 0; înălțime: 65px; lățime: 580px; display: block;  .button1: hover / * mouseOver * / fundal: url (imagini / download.png) 0 65px;  

 .butonul2, .button2 a background: url (imagini / download.png) 0 -65px; înălțime: 65px; lățime: 580px; display: block;  .button2 a background-position: 0 0;  

 $ (() ($) ($) () () (). , funcția () $ (this) .stop () animate ('opacity': '1', 500);););