Jednostavno Poziv na akciju gumb s CSS i jQuery

Poziv na akciju u web dizajnu je pojam koji se koristi za elemente na web stranici koji zahtijevaju akciju od korisnika (klik, lebdenje, itd.). Danas ćemo stvoriti učinkovit i strašan poziv na akciju gumb s nekim CSS i jQuery da zgrabite pažnju korisnika i potaknete ga da klikne .

Tijekom ovog tutoriala objasnit ćemo vam svaku liniju korištenog koda s detaljima i nadamo se da će vam to biti korisno. Sljedeći vodič koristi HTML, CSS i jQuery s razinom težine Početnik i procijenjeno vrijeme završetka 45 minuta.

Preuzmite vodič (.zip) ili Demo

Dio I - Stvaranje slike gumba

U ovom prvom dijelu ćemo vam pokazati kako stvoriti potrebne slike pomoću Photoshopa jednostavnim koracima. Počnimo.

Stvorite novi Photoshop dokument širine 580px i visine 130px. Ići Pogled > Novi vodič zatim postavite Orijentacija do vodoravan i Položaj do 65px.

Izradite više vodiča; svaki za vrh, dno, lijevo i desno. Kada završite, vaša slika mora imati sljedeće vodiče:

Čini se da vodiči razdvajaju vaše platno na gornju i donju polovicu. Odaberite Okrugli pravokutni alat, Postavi Radius na 5px i nacrtati pravokutni oblik na gornjoj polovici platna.

Promijenite stilove za Gradijentno prekrivanje i udar.

Odaberite Tip Alat i vrsta “preuzimanje datoteka” kao uzorak teksta u okvir koji ste stvorili. Poravnajte tekst na sredinu sredine okvira, a izlaz bi trebao izgledati ovako:

Završili smo izradu prvog stanja gumba za preuzimanje. Recimo stvoriti novu grupu i premjestite sve slojeve u nju. Udvostručite grupu i zatim je smjestite u prvu skupinu. stvorili smo.

Krenite prema dupliciranoj grupi i promijenite Gradijentno prekrivanje i udar stil naše druge pravokutne kutije (one u kojoj se nalazi) sa sljedećim postavkama:

Kada je druga skupina odabrana, upotrijebite Pomicati alat za pomicanje cijele pravokutne kutije do druge polovice platna.

To je to! Završili smo s prvim dijelom. Spremite svoju sliku kao download.png i pokrenite svoj omiljeni uređivač koda.

Preuzmite PSD

II. Dio - HTML

Korak 1 - Pripremite potrebne datoteke

Stvorite mapu i dodijelite joj ime. Nazvat ćemo ga jQueryCallToaction za ovaj vodič. U jQueryCallToaction stvoriti sljedeće datoteke / mape:

1. Prazna HTML datoteka, index.html
2. Prazna CSS datoteka, style.css
3. Prazna JavaScript datoteka, script.js
4. Mapa s imenom "slika"
5. Mjesto download.png u slika mapa.

Korak 2 - Veza index.html s CSS & JS

Povežimo naš CSS i JavaScript do index.html. Stavite ih unutra . Počinjemo s CSS datoteka:

onda najnovija verzija jQuery iz Googleovog spremišta biblioteka AJAX:

i konačno naše JavaScript datoteka :

Sada naše trebao bi izgledati ovako:

Stavimo kodove za naše gumbe unutra oznaka:

Obrazloženje: Stvorili smo paragrafe za dva gumba, a svaki je zamotan s hipervezom u. Linija 1: class = "button1" nalazi se unutra , dok linija 2: class = "button1" nalazi se unutra

 .gumb1 / * Gumb samo s CSS-om * / background: url (images / download.png) 0 0; visina: 65px; Širina: 580px; Prikaz: blok;  .button1: hover / * mouseOver * / pozadina: url (images / download.png) 0 65px;  

 .button2, .button2 a pozadina: url (images / download.png) 0 -65px; visina: 65px; Širina: 580px; Prikaz: blok;  .button2 a pozadinska pozicija: 0;  

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