Preprost klic na akcijo gumb s CSS & jQuery

Poziv k dejanju v spletnem oblikovanju je izraz, ki se uporablja za elemente na spletni strani, ki zahtevajo dejanje od uporabnika (klik, lebdenje itd.). Danes bomo ustvarite učinkovit in odličen gumb za klicanje z nekaterimi CSS in jQuery ki privlečejo pozornost uporabnika in ga privabljajo, da klikne .

V celotni vadnici bomo razložili vsako vrstico uporabljene kode s podrobnostmi in upamo, da vam bo to koristilo. Naslednje vadnice uporablja HTML, CSS in jQuery s težavnostjo Začetnik in predvideni čas dokončanja. \ t 45 minut.

Prenos vadnice (.zip) ali Demo

Del I - Ustvarite sliko gumba

V tem prvem delu vam bomo pokazali, kako ustvariti potrebne slike s Photoshopom v preprostih preprostih korakih. Začnimo.

Ustvarite nov dokument v Photoshopu s širino 580px in višino 130px. Pojdi do Prikaži > Nov vodnik nato nastavite Usmerjenost do Vodoravno in Položaj do 65 slikovnih pik.

Ustvarite več vodnikov; vsak za zgornji, spodnji, levi in ​​desni. Ko končate, mora vaša slika vsebovati naslednje vodnike:

Zdi se, da vodniki delijo vaše platno na zgornjo in spodnjo polovico. Izberite Zaokroženo pravokotno orodje, nastavite Polmer na 5px in nariše pravokotno obliko na zgornji polovici platna.

Spremenite sloge za Gradientno prekrivanje in Možganska kap.

Izberite Vrsta Orodje in tip “Prenesi” za vzorec besedila v polje, ki ste ga ustvarili. Poravnajte besedilo s sredinsko sredino polja in vaš izhod mora izgledati takole:

Končali smo s prvim stanjem gumba za prenos. Gremo ustvarite novo skupino in premaknite vse plasti vanje. Podvojite skupino in jo nato postavite pod prvo skupino. ustvarili smo.

Pojdite do podvojene skupine in spremenite Gradientno prekrivanje in Možganska kap slog naše druge pravokotne škatle (ležečega) z naslednjimi nastavitvami:

Z drugo izbrano skupino uporabite Premakni se orodje za premik celotne pravokotne škatle navzdol v drugo polovico platna.

To je to! Končali smo s prvim delom. Shranite sliko kot download.png in poženite najljubšega urejevalnika kod.

Prenesite PSD

II. Del - HTML

Korak 1 - Pripravite potrebne datoteke

Ustvarite mapo in ji dodelite ime. Imenovali jo bomo jQueryCallToaction za to vadnico. Inside jQueryCallToaction ustvarite te datoteke / mape:

1. Prazna datoteka HTML, index.html
2. Prazna datoteka CSS, style.css
3. Prazna datoteka JavaScript, script.js
4. Mapa, imenovana "slik"
5. Kraj download.png znotraj slik mapo.

Korak 2 - Povezava index.html z CSS & JS

Povežimo našo CSS in JavaScript do index.html. Postavite jih notri . Začnemo s CSS datoteka:

potem najnovejšo različico jQuery iz Googlovega skladišča knjižnic AJAX:

in končno naše Datoteka JavaScript :

Zdaj pa naša videti naj bi bilo približno tako:

Postavimo kode za naše gumbe znotraj oznaka :

Pojasnilo: Ustvarili smo odstavke za dva gumba, z vsakim zavitkom s hiperpovezavo znotraj. Vrstica 1: class = "button1" se nahaja znotraj , medtem ko vrstica 2: class = "button1" se nahaja znotraj

 .gumb1 / * Gumb samo s CSS * / ozadje: url (images / download.png) 0 0; višina: 65px; širina: 580px; prikaz: blok;  .button1: hover / * mouseOver * / ozadje: url (images / download.png) 0 65px;  

 .button2, .button2 a ozadje: url (images / download.png) 0 -65px; višina: 65px; širina: 580px; prikaz: blok;  .button2 a položaj ozadja: 0 0;  

 $ (document) .ready (funkcija () $ ('. button2 a'). hover (funkcija () $ (this) .stop (). animate ('opacity': '0', 500); , funkcija () $ (this) .stop (). animate ('opacity': '1', 500);););