Vienkāršā poga ar aicinājumu uz rīcību ar CSS un jQuery

Aicinājums rīkoties web dizains ir termins, ko lieto tīmekļa lapas elementiem, kas pieprasa lietotāja rīcību (noklikšķinot, lidojot utt.). Šodien mēs ejam izveidot efektīvu un awesome aicinājumu uz rīcību pogu ar dažiem CSS un jQuery kas satver lietotāja uzmanību un piesaista viņu klikšķināt .

Šajā apmācībā mēs izskaidrosim katru izmantoto kodu ar detaļām un ceram, ka tas būs noderīgs jums. Tiek izmantota šāda apmācība HTML, CSS un jQuery ar grūtības pakāpi Iesācējs un paredzamais pabeigšanas laiks 45 minūtes.

Lejupielādes apmācība (.zip) vai Demo

I daļa - pogas attēla izveide

Šajā pirmajā daļā mēs jums parādīsim, kā ar Photoshop palīdzību izveidot nepieciešamos attēlus vienkāršos soļos. Sāksim.

Izveidojiet jaunu Photoshop dokumentu ar platumu 580px un augstumu 130px. Iet uz Skatīt > Jauna rokasgrāmata tad iestatiet Orientācija uz Horizontāls un Pozīcija līdz 65px.

Izveidojiet vairāk rokasgrāmatu; katrs no augšas, apakšas, kreisās un labās puses. Kad esat pabeidzis, jūsu attēlam ir jābūt šādām norādēm:

Šķiet, ka ceļveži sadala jūsu audeklu augšējās un apakšējās pusēs. Atlasiet Noapaļots taisnstūra rīks, iestatiet Rādiuss līdz 5px un uzlieciet taisnstūra formu uz audekla augšējās puses.

Mainiet stilu stilu Gradienta pārklājums un Insults.

Atlasiet Tips Rīks un tips “Lejupielādēt” kā parauga tekstu savā izveidotajā lodziņā. Pielāgojiet tekstu lodziņa vidū un jūsu izvadam vajadzētu izskatīties šādi:

Mēs pabeigām lejupielādes pogas pirmā stāvokļa izveidi. Let's izveidot jaunu grupu un pārvietojiet visus slāņus tajā. Dublējiet grupu un tad novietojiet to zem pirmās grupas. mēs esam izveidojuši.

Virzieties uz dublēto grupu un mainiet Gradienta pārklājums un Insults mūsu otrā taisnstūra kārbas stils (virsotne) ar sekojošiem iestatījumiem:

Izmantojot otro grupu, izmantojiet Kustēties rīks, lai pārvietotu visu taisnstūrveida lodziņu uz audekla otro pusi.

Tieši tā! Mēs pabeidzām ar pirmo daļu. Saglabājiet attēlu kā download.png un izdzēsiet savu iecienītāko kodu redaktoru.

Lejupielādēt PSD

II daļa - HTML

1. solis - Sagatavojiet nepieciešamos failus

Izveidojiet mapi un piešķiriet tai nosaukumu. Mēs to nosauksim jQueryCallToaction šai apmācībai. Iekšpusē jQueryCallToaction izveidojiet šos failus / mapes:

1. Tukšs HTML fails, index.html
2. Tukšs CSS fails, style.css
3. Blank JavaScript fails, script.js
4. Mape ar nosaukumu "attēlus"
5. Vieta download.png iekšā attēlus mapi.

2. solis - saite index.html ar CSS & JS

Saistīsim mūsu CSS un JavaScript uz index.html. Novietojiet tos iekšā . Mēs sākam ar CSS fails:

tad jaunākā jQuery versija no Google AJAX bibliotēku krātuves:

un visbeidzot mūsu JavaScript fails :

Tagad mūsu vajadzētu izskatīties šādi:

Pieņemsim kodus mūsu pogām iekšpusē atzīme:

Paskaidrojums: Mēs esam izveidojuši punktus diviem taustiņiem, katrs no tiem iesaiņots ar hipersaiti iekšā. 1. rinda: class = "button1" atrodas iekšā , kamēr 2. līnija: class = "button1" atrodas iekšā

 .poga1 / * poga ar tikai CSS * / fons: url (images / download.png) 0 0; augstums: 65px; platums: 580px; displejs: bloks;  .button1: hover / * mouseOver * / fons: url (images / download.png) 0 65px;  

 .poga2, .button2 a fons: url (images / download.png) 0 -65px; augstums: 65px; platums: 580px; displejs: bloks;  .button2 a fona pozīcija: 0 0;  

 $ (dokuments). jau (funkcija () $ ('. button2 a'). hover (funkcija () $ (this) .stop (). , funkcija () $ (this) .stop (). animēt ('opacity': '1', 500);););