Enkel Call to Action -knapp med CSS & jQuery

Uppmaning till handling i webbdesign är en term som används för element på en webbsida som kräver en åtgärd från användaren (klicka, svävar, etc.). Idag ska vi skapa en effektiv och fantastisk uppmaningsknapp med några CSS och jQuery som tar tag i användarens uppmärksamhet och lockar honom att klicka .

Under hela handledningen kommer vi att förklara varje rad kod som används med detaljer och hoppas att det kommer att vara användbart för dig. Följande handledning använder HTML, CSS och jQuery med svårighetsgrad Nybörjare och en beräknad slutförd tid av 45 minuter.

Hämta handledning (.zip) eller demo

Del I - Skapa knappbilden

I den här första delen kommer vi att visa dig hur du skapar de nödvändiga bilderna med Photoshop i enkla enkla steg. Låt oss börja.

Skapa ett nytt Photoshop-dokument med en bredd på 580px och en höjd av 130px. Gå till Se > Ny guide sätt sedan in Orientering till Horisontell och den Placera till 65px.

Skapa fler guider; var och en för topp, botten, vänster och höger. Din bild ska ha följande guider när du är klar:

Guiderna verkar dela din duk i övre och nedre halvan. Välj Rundad rektangulär verktyg, ställa in Radie till 5px och rita en rektangulär form på den övre halvan av duken.

Ändra stilen för Gradientöverlägg och Stroke.

Välj Typ Verktyg och typ “Ladda ner” för som exempeltext i rutan som du har skapat. Rikta texten till mitten av lådan och din produktion ska se ut så här:

Vi avslutade skapandet av det första tillståndet för nedladdningsknappen. låt oss skapa en ny grupp och flytta alla lager in i den. Kopiera gruppen och placera sedan den under den första gruppen. vi har skapat.

Gå över till den duplicerade gruppen och ändra Gradientöverlägg och Stroke stilen i vår andra rektangulära låda (den svävade) med följande inställningar:

Med den andra gruppen som valts, använd Flytta verktyg för att flytta hela rektangulär rutan ner till den andra halvan av duken.

Det är allt! Vi slutade med den första delen. Spara din bild som download.png och elda din favorit kodredigerare.

Hämta PSD

Del II - HTML

Steg 1 - Förbered de nödvändiga filerna

Skapa en mapp och ge den ett namn. Vi heter det jQueryCallToaction för denna handledning. Inuti jQueryCallToaction mapp, skapa följande följande filer / mappar:

1. Blank HTML-fil, index.html
2. Blank CSS-fil, style.css
3. Blank JavaScript-fil, script.js
4. Mapp med namnet "bilder"
5. Plats download.png inuti bilder mapp.

Steg 2 - Länk index.html med CSS & JS

Låt oss länka vår CSS och JavaScript till index.html. Placera dem inuti . Vi börjar med CSS-fil:

sedan senaste versionen av jQuery från Googles AJAX-bibliotek: repository:

och äntligen vår JavaScript-fil :

Nu vår borde se något så här:

Låt oss sätta koder för våra knappar inuti tagg:

Förklaring: Vi har skapat stycken för två knappar, var och en inslagna med med hyperlänk inuti. Linje 1: class = "button1" är placerad inuti , medan linje 2: class = "button1" är placerad inuti

 .knapp1 / * Knapp med endast CSS * / bakgrund: url (bilder / download.png) 0 0; höjd: 65px; bredd: 580px; display: block; . knapp1: sväva / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; höjd: 65px; bredd: 580px; display: block;  .button2 a bakgrundsposition: 0 0;  

 $ (dokument) .ready (funktion () $ ('. knapp2 a'). sväva (funktion () $ (detta) .stop (). animate ('opacitet': '0', 500); , funktion () $ (detta) .stop (). animera ('opacitet': '1', 500);););