Jednoduché tlačidlo Call to Action s CSS & jQuery

Výzva do akcie v návrhu webových stránok je termín používaný pre prvky na webovej stránke, ktoré požadujú od užívateľa akciu (kliknutie, vznášanie atď.). Dnes to máme vytvorte efektívne a úžasné tlačidlo výzvy na akciu s niektorými CSS a jQuery ktoré chytiť pozornosť užívateľa a lákať ho, aby klikal .

V priebehu tohto tutoriálu vysvetlíme každý riadok použitého kódu s podrobnosťami a dúfame, že vám to bude užitočné. Nasleduje nasledujúci tutoriál HTML, CSS a jQuery s ťažkosťou začiatočník a odhadovaný čas dokončenia 45 minút.

Stiahnutie výučby (.zip) alebo demonštrácie

Časť I - Vytvorte obrázok tlačidla

V tejto prvej časti vám ukážeme, ako vytvoriť potrebné obrázky pomocou programu Photoshop jednoduchými jednoduchými krokmi. Začnime.

Vytvorte nový dokument aplikácie Photoshop so šírkou 580 pixlov a výškou 130 pixlov. Ísť do vyhliadka > Nová príručka potom nastavte orientácia na horizontálne a pozície až 65 px.

Vytvorte viac sprievodcov; každý pre hornú, dolnú, ľavú a pravú stranu. Váš obrázok by mal mať nasledovné vodítka po dokončení:

Vodítka rozdeľujú plátno na hornú a spodnú polovicu. Vyberte položku Zaoblený pravouhlý nástroj, nastaviť Polomer do 5 px a nakreslite obdĺžnikový tvar na hornej polovici plátna.

Zmeniť štýly pre Prekrytie gradientu a Mŕtvica.

Vyberte položku typ Nástroj a typ “Stiahnuť ▼” ako vzorový text do krabice, ktorú ste vytvorili. Zarovnajte text do stredu políčka a výstup by mal vyzerať takto:

Dokončili sme vytvorenie prvého stavu tlačidla na prevzatie. Poďme vytvorte novú skupinu a presuňte do nej všetky vrstvy. Duplikujte skupinu a potom ju umiestnite pod prvú skupinu. sme vytvorili.

Prejdite do duplicitnej skupiny a zmeňte jej Prekrytie gradientu a Mŕtvica štýl našej druhej obdĺžnikovej schránky (vznášanej) s nasledujúcimi nastaveniami:

Po zvolení druhej skupiny použite sťahovať nástroj na presunutie celého obdĺžnikového poľa do druhej polovice plátna.

To je ono! Dokončili sme prvú časť. Uložte obrázok ako download.png a vypáliť váš obľúbený editor kódu.

Stiahnite si PSD

Časť II - HTML

Krok 1 - Pripravte potrebné súbory

Vytvorte priečinok a uveďte mu názov. Povieme to jQueryCallToaction pre tento tutoriál. vnútri jQueryCallToaction zložky, vytvorte tieto nasledujúce súbory / priečinky:

1. Prázdny súbor HTML, index.html
2. Prázdny súbor CSS, style.css
3. Prázdny súbor JavaScript, script.js
4. Priečinok s názvom "snímky"
5. miesto download.png vnútri snímky zložka.

Krok 2 - odkaz index.html s CSS & JS

Prepojme naše CSS a JavaScript na index.html. Vložte ich dovnútra . Začíname s CSS súboru:

potom najnovšiu verziu jQuery z úložiska knižníc AJAX spoločnosti Google:

a nakoniec naša Súbor JavaScript :

Teraz naša by mal vyzerať takto:

Poďme uviesť kódy pre naše tlačidlá vnútri značka:

vysvetlenie: Vytvorili sme odseky pre dve tlačidlá, z ktorých každý je zabalený s hypertextovým odkazom dovnútra. Riadok 1: class = "Button1" je umiestnený vo vnútri , zatiaľ čo riadok 2: class = "Button1" je umiestnený vo vnútri

 .Tlačidlo1 / * Tlačidlo iba s CSS * / background: url (images / download.png) 0 0; výška: 65px; šírka: 580px; Zobrazenie: blok;  .button1: hover / * mouseOver * / pozadie: url (images / download.png) 0 65px;  

 .tlačidlo2, .button2 a background: url (images / download.png) 0 -65px; výška: 65px; šírka: 580px; Zobrazenie: blok;  .button2 a pozadie pozície: 0 0;  

 $ () () () () () () () () () (). , funkcia () $ (this) .stop () animovať ('opacity': '1', 500);););