Lihtne Call to Action nupp CSS & jQueryga

Tegevuskutse veebidisainis kasutatakse terminit, mida kasutatakse veebilehe elementide jaoks, mis taotlevad kasutajalt toimingut (klõpsamine, hõljumine jne). Täna me läheme luua mõni CSS-i ja jQueryga tõhus ja hämmastav üleskutse nupp mis haaravad kasutaja tähelepanu ja meelitavad teda klikkima .

Kogu selle juhendaja jooksul selgitame iga kasutatud koodi rida üksikasjadega ja loodame, et see on teile kasulik. Järgnev juhendaja kasutab HTML, CSS ja jQuery raskustes Algaja ja hinnanguline valmimisaeg 45 minutit.

Lae juhend (.zip) või Demo

I osa - nupu kujutise loomine

Selles esimeses osas näitame teile, kuidas luua Photoshopiga vajalikud pildid lihtsate lihtsate sammudega. Alustame.

Loo uus Photoshopi dokument laiusega 580px ja kõrgusega 130 px. Minema Vaade > Uus juhend seejärel seadke Orientatsioon kuni Horisontaalne ja Asukoht kuni 65 pikslit.

Loo rohkem juhendeid; iga ülemise, alumise, vasak- ja parempoolse kohta. Teie pildil peaks olema järgmised juhised pärast seda, kui olete lõpetanud:

Juhendid näivad jagavat oma lõuendi ülemise ja alumise poole. Valige Ümardatud ristkülikukujuline tööriist, määrake Raadius kuni 5tk ja joonista lõuendi ülaosale ristkülikukujuline kuju.

Muuda stiilid Gradienti ülekate ja Stroke.

Valige Tüüp Tööriist ja tüüp “Lae alla” kui näidistekst oma loodud kasti. Joondage tekst kasti keskele ja väljund peaks välja nägema sellisena:

Lõpetasime allalaadimisnupu esimese oleku loomise. Olgem luua uus grupp ja liigutage kõik kihid. Grupi dubleerimine ja asetage see esimese grupi alla. oleme loonud.

Suunduge dubleeritud gruppi ja muutke Gradienti ülekate ja Stroke meie teise ristkülikukujulise kasti (hovered) stiil, millel on järgmised seaded:

Kui teine ​​rühm on valitud, kasutage Liiguta tööriista kogu ristkülikukujulise kasti teisaldamiseks lõuendi teise poole.

See on nii! Lõpetasime esimese osaga. Salvesta pilt nagu download.png ja tulistage oma lemmikkoodi redaktor.

Lae PSD alla

II osa - HTML

1. etapp - valmistage ette vajalikud failid

Loo kaust ja anna sellele nimi. Me nimetame selle jQueryCallToaction selle juhendi jaoks. Toas jQueryCallToaction luua järgmised failid / kaustad:

1. Tühi HTML-fail, index.html
2. Tühi CSS-fail, style.css
3. Tühi JavaScript-fail, script.js
4. Kaust nimega "pilte"
5. Koht download.png sees pilte kausta.

2. etapp - link index.html CSS & JS-ga

Lingime oma CSS ja JavaScript kuni index.html. Asetage need sees . Me alustame CSS-fail:

siis jQuery uusim versioon Google'i AJAXi raamatukogude hoidlast:

ja lõpuks meie JavaScript-fail :

Nüüd meie peaks nägema midagi sellist:

Let's panna koodid meie nupud sees silt:

Selgitus: Oleme loonud lõiked kahe nupu jaoks, millest igaüks on pakitud hüperlingiga sees. Rida 1: class = "button1" on paigutatud , liin 2: class = "button1" on paigutatud

 .nupp1 / * nupp ainult CSS-ga * / taust: url (images / download.png) 0 0; kõrgus: 65 pikslit; laius: 580px; kuva: plokk;  .button1: hover / * mouseOver * / taust: url (images / download.png) 0 65px;  

 .nupp2, .button2 a taust: url (images / download.png) 0 -65px; kõrgus: 65 pikslit; laius: 580px; kuva: plokk;  .button2 a taustapositsioon: 0 0;  

 $ (dokument). juba (funktsioon () $ ('. button2 a'). hover (funktsioon () $ (see) .stop (). animate ('opacity': '0', 500); , funktsioon () $ (see) .stop (). animeeri ('opacity': '1', 500);););