Paprastas „raginimas veikti“ mygtukas su CSS ir jQuery

Kvietimas veikti žiniatinklio dizainas yra terminas, naudojamas tinklalapio elementams, kurie prašo naudotojo veiksmų (paspaudimas, svyravimas ir tt). Šiandien mes ketiname sukurti efektyvų ir nuostabų raginimo veikti mygtuką su kai kuriais CSS ir jQuery kad patrauktų vartotojo dėmesį ir vilioja jį spustelėti .

Per šią pamoką mes paaiškinsime kiekvieną naudojamo kodo eilutę su detalėmis ir tikimės, kad tai bus naudinga jums. Naudojama ši pamoka HTML, CSS ir jQuery su sunkumais Pradedantysis ir numatomas pabaigos laikas 45 minutės.

Atsisiųsti vadovėlį (.zip) arba Demo

I dalis. Sukurti mygtuką

Šioje pirmojoje dalyje parodysime, kaip sukurti paprastus paprastus veiksmus su Photoshop. Pradėkime.

Sukurkite naują „Photoshop“ dokumentą 580 pikselių plotis ir 130 pikselių aukštis. Eiti į Žiūrėti > Naujas vadovas tada nustatykite Orientacija į Horizontalus ir Pozicija iki 65 pikselių.

Kurkite daugiau vadovų; kiekvienas iš viršaus, apačioje, kairėje ir dešinėje. Kai baigsite, jūsų paveikslėlyje turi būti šie vadovai:

Atrodo, kad vadovai padalija jūsų drobę į viršų ir apačią. Pasirinkite Apvalus stačiakampis įrankis, nustatyti Spindulys iki 5px ir užfiksuokite stačiakampę formą ant viršutinės drobės pusės.

Pakeiskite stilių Gradiento perdanga ir Insultas.

Pasirinkite Tipas Įrankis ir tipas “parsisiųsti” kaip mėginio tekstą į sukurtą laukelį. Sureguliuokite tekstą į vidurinį langelio vidurį, o išvestis turėtų atrodyti taip:

Baigėme pirmojo atsisiuntimo mygtuko būsenos sukūrimą. Leiskite sukurti naują grupę ir perkelkite visus sluoksnius į jį. Pasikartokite grupę ir tada padėkite jį pagal pirmąją grupę. mes sukūrėme.

Pereikite prie dubliuojamos grupės ir pakeiskite Gradiento perdanga ir Insultas antrojo stačiakampio formos dėžutės stilius (vienoje vietoje):

Pasirinkus antrąją grupę, naudokite Perkelti įrankis, per kurį visą stačiakampį langelį galima perkelti į antrą drobės pusę.

Viskas! Baigėme pirmąją dalį. Išsaugokite vaizdą kaip download.png ir užsidėkite mėgstamą kodo redaktorių.

Atsisiųsti PSD

II dalis - HTML

1 žingsnis. Paruoškite būtinus failus

Sukurkite aplanką ir suteikite jam pavadinimą. Mes jį pavadinsime jQueryCallToaction šio vadovo. Viduje jQueryCallToaction aplanką, sukurkite šiuos failus / aplankus:

1. Tuščias HTML failas, index.html
2. Tuščias CSS failas, style.css
3. Blank JavaScript failas, script.js
4. Aplankas, pavadintas „vaizdai"
5. Vieta download.png viduje vaizdai aplanką.

2 žingsnis. Nuoroda index.html su CSS & JS

Susiejame mūsų CSS ir „JavaScript“ į index.html. Įdėkite juos viduje . Mes pradedame nuo CSS failas:

tada naujausia „jQuery“ versija iš „Google“ AJAX bibliotekų saugyklos:

ir galiausiai mūsų „JavaScript“ failas :

Dabar mūsų turėtų atrodyti taip:

Leiskite kodams įvesti mūsų mygtukus žyma:

Paaiškinimas: Mes sukūrėme dalis dviejų mygtukų, kurių kiekvienas suvyniotas su hipersaitu viduje. 1 eilutė: class = "button1" viduje , o 2 eilutė: class = "button1" viduje

 .mygtukas1 / * mygtukas tik su CSS * / fonas: url (images / download.png) 0 0; aukštis: 65px; plotis: 580px; ekranas: blokas;  .button1: hover / * mouseOver * / fonas: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; aukštis: 65px; plotis: 580px; ekranas: blokas;  .button2 a fono padėtis: 0 0;  

 $ (dokumentas). jau (funkcija () $ ('. button2 a'). pakimba (funkcija () $ (this) .stop (). animuoti ('opacity': '0', 500); , funkcija () $ (this) .stop (). animuoti ('opacity': '1', 500);););