Jednoduchý Call to Action Tlačítko S CSS & jQuery

Výzva k akci ve web designu je termín používaný pro prvky webové stránky, které si vyžádají akci od uživatele (kliknutím, vznášením atd.). Dnes půjdeme vytvořit efektivní a úžasné volání k akci tlačítko s některými CSS a jQuery který upoutá pozornost uživatele a láká ho k kliknutí .

V průběhu tohoto tutoriálu vám vysvětlíme každý řádek použitého kódu s detaily a doufáme, že to bude pro vás užitečné. Následující výukový program používá HTML, CSS a jQuery s obtížností Začátečník a odhadovaný čas dokončení 45 minut.

Stáhnout návod (.zip) nebo Demo

Část I - Vytvořit obrázek tlačítka

V této první části vám ukážeme, jak vytvořit potřebné obrazy s Photoshopem v jednoduchých jednoduchých krocích. Začněme.

Vytvořte nový dokument Photoshopu o šířce 580px a výšce 130px. Jít do Pohled > Nový průvodce pak nastavte Orientace na Horizontální a Pozice do 65px.

Vytvořte více průvodců; každý pro horní, dolní, levý a pravý. Po dokončení by měl mít váš obrázek tyto pokyny:

Zdá se, že vodítka rozdělují plátno na horní a dolní polovinu. Vybrat Zaoblený obdélníkový nástroj, nastav Poloměr na 5px a nakreslit obdélníkový tvar na horní polovinu plátna.

Změnit styly pro Překrytí přechodu a Mrtvice.

Vybrat Typ Nástroj a typ “Stažení” jako ukázkový text do pole, které jste vytvořili. Zarovnejte text do středu středu pole a výstup by měl vypadat takto:

Dokončili jsme vytvoření prvního stavu tlačítka stahování. Pojďme vytvořit novou skupinu a přesunout všechny vrstvy do ní. Duplikujte skupinu a umístěte ji do první skupiny. jsme vytvořili.

Přejděte do duplikované skupiny a změňte Překrytí přechodu a Mrtvice styl naší druhé obdélníkové krabice (vznášející se) s následujícími nastaveními:

Při výběru druhé skupiny použijte Přestěhovat se přesunout celý obdélníkový rámeček dolů na druhou polovinu plátna.

A je to! Skončili jsme s první částí. Uložit obrázek jako download.png a vypálit svůj oblíbený editor kódu.

Stáhnout PSD

Část II - HTML

Krok 1 - Připravte potřebné soubory

Vytvořte složku a pojmenujte ji. Pojmenujeme ho jQueryCallToaction pro tento tutoriál. Uvnitř jQueryCallToaction vytvořte tyto soubory / složky:

1. Prázdný soubor HTML, index.html
2. Prázdný soubor CSS, style.css
3. Prázdný soubor JavaScript, script.js
4. Složka s názvem "snímky"
5. Místo download.png uvnitř snímky složky.

Krok 2 - Odkaz index.html s CSS & JS

Pojďme spojit naše CSS a JavaScript na index.html. Umístěte je dovnitř . Začneme s Soubor CSS:

pak nejnovější verze jQuery z úložiště knihoven AJAX společnosti Google:

a nakonec naše Soubor JavaScript :

Teď naše by mělo vypadat něco takového:

Dejme kódy pro naše knoflíky uvnitř značka:

Vysvětlení: Vytvořili jsme odstavce pro dvě tlačítka, každé zabalené s hypertextovým odkazem uvnitř. Řádek 1: class = "button1" je umístěn uvnitř , zatímco linka 2: class = "button1" je umístěn uvnitř

 .button1 / * Tlačítko s pouze CSS * / background: url (images / download.png) 0 0; výška: 65px; šířka: 580px; zobrazení: blok;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; výška: 65px; šířka: 580px; zobrazení: blok;  .button2 a background-position: 0 0;  

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