Egyszerű Call To Action gomb CSS és jQuery használatával

Felhívás a cselekvésre A webes tervezés egy olyan kifejezés, amelyet a weblap olyan elemeihez használnak, amelyek a felhasználótól fellépést kérnek (kattintás, lebegés stb.). Ma megyünk hozzon létre egy hatékony és félelmetes híváshívó gombot néhány CSS és jQuery segítségével hogy megragadja a felhasználó figyelmét, és csábítja őt .

Ebben a bemutatóban a használt kód minden sorát részletesen ismertetjük, és reméljük, hogy hasznos lesz az Ön számára. A következő bemutató használat HTML, CSS és jQuery nehézségi szinten Kezdő és a becsült befejezési idő 45 perc.

Letöltési útmutató (.zip) vagy Demó

I. rész - A gomb kép létrehozása

Ebben az első részben bemutatjuk, hogyan lehet a szükséges képeket egyszerű egyszerű lépésekben létrehozni a Photoshop segítségével. Kezdjük.

Hozzon létre egy új Photoshop dokumentumot a szélessége 580x és a magassága 130px. Menj Kilátás > Új útmutató akkor állítsa be a Orientáció nak nek Vízszintes és a Pozíció 65x-ig.

További útmutatók létrehozása; mindegyik a felső, alsó, bal és jobb. A képnek ezeket a következő útmutatókat kell készítenie, ha elkészült:

Úgy tűnik, hogy a vezetők felosztják a vászont a felső és alsó felére. Válaszd ki a Lekerekített négyszögletes eszköz, állítsa be a Sugár 5px-ig, és egy téglalap alakú képet rajzol a vászon felső felére.

Módosítsa a Stílusokat Színátmenet és ütés.

Válaszd ki a típus Szerszám és típus “Letöltés” mint szöveges szöveget a létrehozott mezőbe. Igazítsa a szöveget a doboz közepének középpontjához, és a kimenetnek hasonlónak kell lennie:

Végeztük a letöltés gomb első állapotának létrehozását. Nézzük hozzon létre egy új csoportot és mozgassa az összes réteget. Ismételje meg a csoportot majd helyezze el az első csoport alatt. hoztunk létre.

Menj át a párhuzamos csoporthoz, és módosítsd a Színátmenet és ütés a második téglalap alakú dobozunk (a lebegett) stílusa a következő településekkel:

A második csoport kiválasztásával használja Mozog szerszám a teljes négyszögletes doboz mozgatásához a vászon második felére.

Ez az! Első részünkkel befejeztük. Mentse el a képet download.png és tegye fel a kedvenc kódszerkesztőjét.

Letöltés PSD

II. Rész - A HTML

1. lépés - Készítse elő a szükséges fájlokat

Hozzon létre egy mappát, és adjon nevet. Megnevezzük jQueryCallToaction ehhez a bemutatóhoz. Belül jQueryCallToaction mappát, hozza létre az alábbi fájlokat / mappákat:

1. Üres HTML fájl, index.html
2. Üres CSS fájl, style.css
3. Üres JavaScript fájl, script.js
4. Mappa neve:képek"
5. Hely download.png belül képek mappa.

2. lépés - Link index.html a CSS & JS segítségével

Kapcsoljuk össze CSS és JavaScript nak nek index.html. Helyezzük be őket . Kezdjük a CSS fájl:

aztán a a jQuery legújabb verziója a Google AJAX Könyvtár-tárolójából:

és végül a mi JavaScript fájl :

Most a miénk ilyet kell kinéznie:

Tegyünk kódokat a gombjainkba címke:

Magyarázat: Létrehoztunk két gombhoz tartozó bekezdést, amelyek mindegyike csomagolva van hiperhivatkozással belül. 1. sor: class = "button1" be van helyezve , míg a 2. sor: class = "button1" be van helyezve

 .gomb1 / * gomb csak CSS-sel * / háttér: url (images / download.png) 0 0; magasság: 65px; szélesség: 580px; display: block;  .button1: hover / * mouseOver * / háttér: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; magasság: 65px; szélesség: 580px; display: block;  .2 gomb a háttérpozíció: 0 0;  

 $ (dokumentum). már (függvény () $ ('. button2 a'). lebeg (funkció () $ (ez) .stop (). animate ('opacity': '0', 500); , funkció () $ (ez) .stop (). animate ('opacity': '1', 500);););