Enkel Call to Action -knapp med CSS & jQuery

Oppfordring til handling i webdesign er et begrep som brukes til elementer på en nettside som krever en handling fra brukeren (klikke, svever osv.). I dag skal vi Lag en effektiv og fantastisk Call to Action-knapp med noen CSS og jQuery som tar tak i brukerens oppmerksomhet og lokker ham til å klikke .

Gjennom denne opplæringen vil vi forklare hver linje med brukt kode med detaljer og håper det vil være nyttig for deg. Følgende opplæring bruker HTML, CSS og jQuery med vanskelighetsgrad Nybegynner og en estimert sluttid på 45 minutter.

Last ned opplæringen (.zip) eller Demo

Del I - Opprett knappens bilde

I denne første delen vil vi vise deg hvordan du lager de nødvendige bildene med Photoshop i enkle, enkle trinn. La oss begynne.

Lag et nytt Photoshop-dokument med en bredde på 580px og en høyde på 130px. Gå til Utsikt > Ny guide sett deretter orientering til Horisontal og Stilling til 65px.

Lag flere guider; hver for topp, bunn, venstre og høyre. Bildet ditt bør ha disse følgende veiledningene når du er ferdig:

Guidene ser ut til å dele lerretet i topp og bunnhalvdel. Velg Avrundet rektangulært verktøy, sett Radius til 5px og tegne en rektangulær form på den øverste halvdelen av lerretet.

Endre stilene for Gradient Overlay og Stroke.

Velg Type Verktøy og type “nedlasting” for som eksempeltekst i boksen du har opprettet. Juster teksten til midten av boksen, og utgangen din skal se slik ut:

Vi avsluttet etableringen av den første tilstanden til nedlastningsknappen. la oss opprett en ny gruppe og flytt alle lagene inn i den. Dupliserer gruppen og plasser den under den første gruppen. vi har opprettet.

Gå over til duplisert gruppe og endre Gradient Overlay og Stroke stilen til den andre rektangulære boksen (den svevede) med følgende innstillinger:

Med den andre gruppen som er valgt, bruk Bevege seg verktøy for å flytte hele rektangulær boksen ned til andre halvdel av lerretet.

Det er det! Vi avsluttet med første del. Lagre bildet ditt som download.png og brann opp favorittkodeditoren din.

Last ned PSD

Del II - HTML

Trinn 1 - Forbered de nødvendige filene

Opprett en mappe, og gi den et navn. Vi nevner det jQueryCallToaction for denne opplæringen. Innsiden jQueryCallToaction mappe, opprett disse følgende filene / mappene:

1. Blank HTML-fil, index.html
2. Blank CSS-fil, style.css
3. Tom JavaScript-fil, script.js
4. Mappe, kalt "Bilder"
5. Sted download.png innsiden Bilder mappe.

Trinn 2 - Link index.html med CSS og JS

La oss knytte vår CSS og Javascript til index.html. Plasser dem innvendig . Vi begynner med CSS-fil:

og så siste versjon av jQuery fra Googles AJAX-bibliotek: repository:

og til slutt vår JavaScript-fil :

Nå vår bør se noe slikt ut:

La oss sette koder for knappene våre inni stikkord :

Forklaring: Vi har opprettet avsnitt for to knapper, hver pakket inn med med hyperkobling innsiden. Linje 1: class = "Button1" er plassert inne , mens linje 2: class = "Button1" er plassert inne

 .button1 / * Knapp med kun CSS * / bakgrunn: url (images / download.png) 0 0; høyde: 65px; bredde: 580 piksler; display: block; . knapp1: svever / * mouseOver * / bakgrunn: url (bilder / download.png) 0 65px;  

 .button2, .button2 a bakgrunn: url (bilder / download.png) 0 -65px; høyde: 65px; bredde: 580 piksler; display: block;  .button2 a bakgrunnsposisjon: 0 0;  

 $ (dokument) .ready (funksjon () $ ('. knapp2 a'). svinger (funksjon () $ (dette) .stop (). animate ('opacity': '0', 500); , funksjon () $ (dette) .stop (). animate ('opacity': '1', 500);););