Enkel Call to Action -knap med CSS & jQuery

Opfordring til handling i webdesign er et udtryk, der bruges til elementer på en webside, der kræver en handling fra brugeren (klikker, svæver osv.). I dag kommer vi til opret en effektiv og fantastisk call to action-knap med nogle CSS og jQuery der griber brugerens opmærksomhed og lokke ham til at klikke .

I hele denne tutorial vil vi forklare hver linje af brugt kode med detaljer og håber det vil være nyttigt for dig. Følgende vejledning bruger HTML, CSS og jQuery med sværhedsgrad Nybegynder og en forventet afslutningstid på 45 minutter.

Download vejledning (.zip) eller Demo

Del I - Opret knapbilledet

I dette første afsnit vil vi vise dig, hvordan du opretter de nødvendige billeder med Photoshop i enkle nemme trin. Lad os begynde.

Opret et nyt Photoshop-dokument med en bredde på 580px og en højde på 130px. Gå til Udsigt > Ny vejledning Indstil derefter Orientering til Vandret og Position til 65px.

Opret flere guider; hver for top, bund, venstre og højre. Dit billede skal have følgende vejledninger, når du er færdig:

Guiderne ser ud til at opdele dit lærred i top og nederste halvdele. Vælg Afrundet rektangulært værktøj, Indstil Radius til 5px og tegne en rektangulær form på den øverste halvdel af lærredet.

Skift stilarterne for Gradient Overlay og Slag.

Vælg Type Værktøj og type “Hent” for som eksempeltekst i den boks, du har oprettet. Juster teksten til midten af ​​boksen, og din produktion skal se sådan ud:

Vi er færdige med oprettelsen af ​​den første tilstand af downloadknappen. Lad os Opret en ny gruppe og flyt alle lag ind i det. Duplikere gruppen og sæt den derefter under den første gruppe. vi har oprettet.

Gå over til den duplikerede gruppe og skift Gradient Overlay og Slag stil af vores anden rektangulære boks (den svævede) med følgende sætninger:

Med den anden gruppe valgt, brug Bevæge sig værktøj til at flytte hele rektangulær boksen ned til anden halvdel af lærredet.

Det er det! Vi sluttede med første del. Gem dit billede som download.png og brand din favorit kode editor.

Download PSD

Del II - HTML

Trin 1 - Forbered de nødvendige filer

Opret en mappe, og giv den et navn. Vi navngiver det jQueryCallToaction for denne vejledning. Inde jQueryCallToaction mappe, opret disse følgende filer / mapper:

1. Blank HTML-fil, index.html
2. Blank CSS-fil, style.css
3. Blank JavaScript-fil, script.js
4. Mappe med navnet "billeder"
5. Placere download.png inde billeder folder.

Trin 2 - Link index.html med CSS & JS

Lad os forbinde vores CSS og JavaScript til index.html. Placer dem inde . Vi begynder med CSS-fil:

så den seneste version af jQuery fra Googles AJAX-bibliotek: repository:

og endelig vores JavaScript-fil :

Nu vores skal se sådan ud:

Lad os sætte koder til vores knapper inde tag:

Forklaring: Vi har oprettet afsnit til to knapper, hver indpakket med med hyperlink inde. Linie 1: class = "button1" er placeret indeni , mens linje 2: class = "button1" er placeret indeni

 .button1 / * Knappen kun med CSS * / baggrund: url (images / download.png) 0 0; højde: 65px; bredde: 580px; display: block;  .knap1: svæver / * mouseOver * / baggrund: url (billeder / download.png) 0 65px;  

 .button2, .button2 a baggrund: url (billeder / download.png) 0 -65px; højde: 65px; bredde: 580px; display: block;  .button2 a baggrundsposition: 0 0;  

 $ (dokument) .ready (funktion () $ ('.knap2 a'). svæver (funktion () $ (dette) .stop (). animere ('opacitet': '0', 500); , funktion () $ (dette) .stop (). animere ('opacitet': '1', 500);););