Einfacher Call To Action Button mit CSS & jQuery

Aufruf zum Handeln In Webdesign ist ein Begriff für Elemente auf einer Webseite, die vom Benutzer eine Aktion anfordern (Klicken, Schwebeflug usw.). Heute gehen wir zu Erstellen Sie mit CSS und jQuery einen effektiven und großartigen Aufruf zur Aktion das zieht die Aufmerksamkeit des Benutzers an und lockt ihn zum Klicken .

In diesem Tutorial erklären wir jede Zeile des verwendeten Codes mit Details und hoffen, dass er für Sie nützlich ist. Das folgende Tutorial verwendet HTML, CSS und jQuery mit Schwierigkeitsgrad Anfänger und eine geschätzte Fertigstellungszeit von 45 Minuten.

Tutorial herunterladen (.zip) oder Demo

Teil I - Erstellen Sie das Schaltflächenbild

In diesem ersten Teil zeigen wir Ihnen in einfachen Schritten, wie Sie die benötigten Bilder mit Photoshop erstellen. Lasst uns beginnen.

Erstellen Sie ein neues Photoshop-Dokument mit einer Breite von 580px und einer Höhe von 130px. Gehe zu Aussicht > Neuer Leitfaden dann stellen Sie das ein Orientierung zu Horizontal und das Position bis 65px.

Erstellen Sie weitere Handbücher; jeweils für oben, unten, links und rechts. Sobald Sie fertig sind, sollte Ihr Bild die folgenden Anleitungen haben:

Die Hilfslinien scheinen Ihre Leinwand in eine obere und eine untere Hälfte zu teilen. Wähle aus Abgerundetes rechteckiges Werkzeug, stellen Sie das ein Radius auf 5px und zeichnen Sie eine rechteckige Form in der oberen Hälfte der Leinwand.

Ändern Sie die Stile für Verlaufsüberlagerung und Schlaganfall.

Wähle aus Art Werkzeug und Typ “Herunterladen” für als Beispieltext in das Feld, das Sie erstellt haben. Richten Sie den Text in der Mitte des Kästchens aus und Ihre Ausgabe sollte in etwa wie folgt aussehen:

Wir haben die Erstellung des ersten Status der Download-Schaltfläche abgeschlossen. Lasst uns eine neue Gruppe erstellen und verschiebe alle Ebenen hinein. Duplizieren Sie die Gruppe und positionieren Sie es dann unter der ersten Gruppe. wir haben geschaffen.

Gehen Sie zu der duplizierten Gruppe und ändern Sie die Verlaufsüberlagerung und Schlaganfall Stil unserer zweiten rechteckigen Box (der schwebenden Box) mit folgenden Einstellungen:

Wenn die zweite Gruppe ausgewählt ist, verwenden Sie Bewegung Werkzeug, um den gesamten rechteckigen Rahmen auf die zweite Hälfte der Leinwand zu verschieben.

Das ist es! Wir haben mit dem ersten Teil fertig. Speichern Sie Ihr Bild als download.png und starten Sie Ihren bevorzugten Code-Editor.

PSD herunterladen

Teil II - Das HTML

Schritt 1 - Bereiten Sie die erforderlichen Dateien vor

Erstellen Sie einen Ordner und geben Sie ihm einen Namen. Wir werden es nennen jQueryCallToaction für dieses Tutorial. Innerhalb jQueryCallToaction In diesem Ordner erstellen Sie folgende Dateien / Ordner:

1. Leere HTML-Datei, index.html
2. Leere CSS-Datei, style.css
3. Leere JavaScript-Datei, script.js
4. Ordner mit dem Namen "Bilder"
5. Platz download.png Innerhalb Bilder Mappe.

Schritt 2 - Link index.html mit CSS & JS

Lass uns unsere verlinken CSS und JavaScript zu index.html. Platziere sie hinein . Wir beginnen mit dem CSS-Datei:

dann ist die neueste Version von jQuery aus dem AJAX Libraries-Repository von Google:

und schließlich unser JavaScript-Datei :

Jetzt unser sollte ungefähr so ​​aussehen:

Lassen Sie uns die Codes für unsere Tasten einfügen Etikett :

Erläuterung: Wir haben Absätze für zwei Schaltflächen erstellt, von denen jede mit umschlossen ist mit Hyperlink Innerhalb. Linie 1: class = "button1" ist innen platziert , während Linie 2: class = "button1" ist innen platziert

 .button1 / * Nur Button mit CSS * / background: url (images / download.png) 0 0; Höhe: 65px; Breite: 580px; Bildschirmsperre;  .button1: hover / * mouseOver * / hintergrund: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; Höhe: 65px; Breite: 580px; Bildschirmsperre;  .button2 a Hintergrundposition: 0 0;  

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