Prosty przycisk „Call To Action” z CSS i jQuery

Wezwanie do działania w projektowaniu stron internetowych jest terminem używanym dla elementów na stronie internetowej, które wymagają działania od użytkownika (kliknięcie, najechanie kursorem itp.). Dzisiaj idziemy stwórz skuteczny i niesamowity przycisk „zadzwoń do akcji” z niektórymi CSS i jQuery które przyciągają uwagę użytkownika i zachęcają go do kliknięcia .

W tym samouczku wyjaśnimy każdą linię używanego kodu ze szczegółami i mamy nadzieję, że będzie on użyteczny dla Ciebie. Poniższy samouczek używa HTML, CSS i jQuery z poziomem trudności Początkujący i szacowany czas zakończenia 45 minut.

Pobierz samouczek (.zip) lub Próbny

Część I - Utwórz obraz przycisku

W tej pierwszej części pokażemy, jak tworzyć potrzebne obrazy za pomocą programu Photoshop w prostych, prostych krokach. Zaczynajmy.

Utwórz nowy dokument Photoshop o szerokości 580px i wysokości 130px. Iść do Widok > Nowy przewodnik następnie ustaw Orientacja do Poziomy i Pozycja do 65px.

Utwórz więcej przewodników; każdy dla góry, dołu, lewej i prawej. Po zakończeniu obraz powinien zawierać następujące przewodniki:

Linie pomocnicze wydają się dzielić płótno na górną i dolną połówkę. Wybierz Zaokrąglone narzędzie prostokątne, Ustaw Promień do 5px i narysuj prostokątny kształt na górnej połowie płótna.

Zmień style na Nakładka gradientu i Uderzenie.

Wybierz Rodzaj Narzędzie i typ “Ściągnij” jako tekst przykładowy w utworzonym polu. Wyrównaj tekst do środka pola, a twoje wyjście powinno wyglądać mniej więcej tak:

Zakończyliśmy tworzenie pierwszego stanu przycisku pobierania. Chodźmy utworzyć nową grupę i przenieś wszystkie warstwy do niego. Powiel grupę a następnie umieść go pod pierwszą grupą. stworzyliśmy.

Udaj się do zduplikowanej grupy i zmień Nakładka gradientu i Uderzenie styl naszego drugiego prostokątnego pudełka (na jednym) z następującymi ustawieniami:

Po wybraniu drugiej grupy użyj Ruszaj się narzędzie do przesuwania całego prostokątnego pudełka w dół do drugiej połowy płótna.

To jest to! Skończyliśmy z pierwszą częścią. Zapisz swój obraz jako download.png i uruchom swój ulubiony edytor kodu.

Pobierz PSD

Część II - HTML

Krok 1 - Przygotuj niezbędne pliki

Utwórz folder i nadaj mu nazwę. Nazwiemy to jQueryCallToaction na ten samouczek. Wewnątrz jQueryCallToaction folder, utwórz następujące pliki / foldery:

1. Pusty plik HTML, index.html
2. Pusty plik CSS, style.css
3. Pusty plik JavaScript, script.js
4. Folder, nazwany „obrazy„
5. Miejsce download.png wewnątrz obrazy teczka.

Krok 2 - Link index.html z CSS i JS

Połączmy nasze CSS i JavaScript do index.html. Umieść je w środku . Zaczynamy od Plik CSS:

a później najnowsza wersja jQuery z repozytorium bibliotek AJAX Google:

i wreszcie nasz Plik JavaScript :

Teraz nasz powinien wyglądać mniej więcej tak:

Umieśćmy kody naszych przycisków w środku tag:

Wyjaśnienie: Stworzyliśmy akapity dla dwóch przycisków, z których każdy jest zapakowany z hiperłączem wewnątrz. Linia 1: class = "button1" jest umieszczony w środku , podczas gdy Linia 2: class = "button1" jest umieszczony w środku

 .button1 / * Przycisk tylko z CSS * / background: url (images / download.png) 0 0; wysokość: 65px; szerokość: 580px; Blok wyświetlacza;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; wysokość: 65px; szerokość: 580px; Blok wyświetlacza;  .button2 a położenie tła: 0 0;  

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