Yksinkertainen Call to Action -painike, jossa CSS & jQuery

Kehotus toimintaan Web-suunnittelussa käytetään termiä, jota käytetään verkkosivun elementteihin, jotka pyytävät käyttäjältä toimintaa (napsauttaminen, leijuu jne.). Tänään aiomme luo tehokas ja mahtava soittopainike, jossa on joitakin CSS ja jQuery että tarttuu käyttäjän huomion ja houkuttelee häntä napsauttamaan .

Tässä opetusohjelmassa selitämme käytetyn koodin jokaisen rivin yksityiskohdilla ja toivomme, että se on hyödyllinen sinulle. Seuraava opetusohjelma käyttää HTML, CSS ja jQuery vaikeustasolla Aloittelija ja arvioitu valmistumisaika 45 minuuttia.

Lataa opetusohjelma (.zip) tai esittely

Osa I - Luo painikekuva

Tässä ensimmäisessä osassa näytämme, miten Photoshopin avulla voidaan luoda tarvittavat kuvat yksinkertaisissa helpoissa vaiheissa. Aloitetaan.

Luo uusi Photoshop-asiakirja joiden leveys on 580px ja korkeus 130 px. Mene näkymä > Uusi opas aseta sitten Suuntautuminen että vaakasuora ja asento 65 pikseliä.

Luo lisää oppaita; kukin ylä-, ala-, vasen ja oikea. Kuvassa pitäisi olla seuraavat oppaat, kun olet valmis:

Oppaat näyttävät jakavan kankaasi ylä- ja alaosaan. Valitse Pyöristetty suorakulmainen työkalu, aseta Säde 5px ja piirrä suorakulmainen muoto kankaalle.

Muuta tyylejä Gradienttikatto ja tahti.

Valitse Tyyppi Työkalu ja tyyppi “ladata” mallikappaleeksi luomaasi laatikkoon. Kohdista teksti laatikon keskelle ja tulosteen pitäisi näyttää tältä:

Viimeistimme latauspainikkeen ensimmäisen tilan. Katsotaanpa luo uusi ryhmä ja siirrä kaikki kerrokset siihen. Kopioi ryhmä ja aseta se sitten ensimmäisen ryhmän alle. olemme luoneet.

Siirry päällekkäiseen ryhmään ja muuta Gradienttikatto ja tahti toisen suorakulmaisen laatikon tyyli (hovered one), jossa on seuraavat asettelut:

Kun toinen ryhmä on valittu, käytä Liikkua työkalu koko suorakulmaisen laatikon siirtämiseen kankaan toiseen puoleen.

Se siitä! Viimeistimme ensimmäisen osan. Tallenna kuva download.png ja sammuta suosikkikoodisi editori.

Lataa PSD

Osa II - HTML

Vaihe 1 - Valmistele tarvittavat tiedostot

Luo kansio ja anna sille nimi. Me nimeämme sen jQueryCallToaction tämä opetusohjelma. Sisällä jQueryCallToaction luo seuraavat tiedostot / kansiot:

1. Tyhjä HTML-tiedosto, index.html
2. Tyhjä CSS-tiedosto, style.css
3. Tyhjä JavaScript-tiedosto, script.js
4. Kansio, nimeltä "kuvien"
5. Paikka download.png sisällä kuvien kansio.

Vaihe 2 - Linkki index.html CSS & JS: n kanssa

Yhdistetään CSS ja JavaScript että index.html. Aseta ne sisään . Aloitamme CSS-tiedosto:

sitten uusin jQuery-versio Googlen AJAX-kirjastojen arkistosta:

ja lopulta meidän JavaScript-tiedosto :

Nyt meidän pitäisi näyttää tältä:

Let's laittaa koodit meidän painikkeet sisällä tunniste:

Selitys: Olemme luoneet kappaleita kahdelle painikkeelle, joista kukin on kääritty hyperlinkki sisällä. Rivi 1: class = "painike1" on sijoitettu sisään , kun linja 2: class = "painike1" on sijoitettu sisään

 .painike1 / * Painike, jossa on vain CSS * / tausta: url (images / download.png) 0 0; korkeus: 65px; leveys: 580px; display: block;  .button1: hover / * mouseOver * / tausta: url (images / download.png) 0 65px;  

 .painike2, .button2 a tausta: url (images / download.png) 0 -65px; korkeus: 65px; leveys: 580px; display: block;  .button2 a tausta-asema: 0 0;  

 $ (asiakirja). jo (toiminto () $ ('. button2 a'). hover (toiminto () $ (this) .stop (). animate ('opacity': '0', 500); , toiminto () $ (tämä) .stop (). animoi ('opacity': '1', 500);););