Simple bouton Call to Action avec CSS & jQuery

Appel à l'action dans la conception Web, terme utilisé pour désigner les éléments d'une page Web qui sollicitent une action de l'utilisateur (clic, survol, etc.). Aujourd'hui nous allons créer un bouton d'appel à l'action efficace et génial avec du CSS et de jQuery qui attirent l'attention de l'utilisateur et l'incitent à cliquer .

Tout au long de ce didacticiel, nous expliquerons chaque ligne de code utilisé avec des détails et espérons qu'il vous sera utile. Le tutoriel suivant utilise HTML, CSS et jQuery avec difficulté Débutant et un temps d'exécution estimé à 45 minutes.

Téléchargez le didacticiel (.zip) ou Démo

Partie I - Créer l'image du bouton

Dans cette première partie, nous allons vous montrer comment créer les images nécessaires avec Photoshop en étapes simples et faciles. Commençons.

Créer un nouveau document Photoshop avec une largeur de 580px et une hauteur de 130px. Aller à Vue > Nouveau guide puis, réglez le Orientation à Horizontal et le Position à 65px.

Créer plus de guides; chacun pour le haut, le bas, la gauche et la droite. Votre image devrait avoir ces guides suivants une fois que vous avez terminé:

Les guides semblent diviser votre toile en deux moitiés. Sélectionnez le Outil rectangulaire arrondi, met le Rayon à 5px et dessinez une forme rectangulaire sur la moitié supérieure de la toile.

Changer les styles pour Incrustation en dégradé et Accident vasculaire cérébral.

Sélectionnez le Type Outil et type “Télécharger” comme exemple de texte dans la case que vous avez créée. Alignez le texte avec le centre de la boîte et votre sortie devrait ressembler à ceci:

Nous avons terminé la création du premier état du bouton de téléchargement. Let's créer un nouveau groupe et déplacez toutes les couches dedans. Dupliquer le groupe puis placez-le sous le premier groupe. nous avons créé.

Dirigez-vous vers le groupe dupliqué et changez le Incrustation en dégradé et Accident vasculaire cérébral style de notre deuxième boîte rectangulaire (celle survolée) avec les réglages suivants:

Avec le deuxième groupe sélectionné, utilisez Bouge toi outil pour déplacer la boîte rectangulaire entière vers la seconde moitié de la toile.

C'est tout! Nous avons fini avec la première partie. Enregistrez votre image sous download.png et lancez votre éditeur de code préféré.

Télécharger PSD

Partie II - Le HTML

Étape 1 - Préparez les fichiers nécessaires

Créez un dossier et nommez-le. Nous l'appellerons jQueryCallToaction pour ce tutoriel. À l'intérieur jQueryCallToaction dossier, créez les fichiers / dossiers suivants:

1. Fichier HTML vide, index.html
2. Fichier CSS vierge, style.css
3. Fichier JavaScript vierge, script.js
4. Dossier nommé "images"
5. Endroit download.png à l'intérieur images dossier.

Étape 2 - Lien index.html avec CSS et JS

Lions notre CSS et JavaScript à index.html. Placez-les à l'intérieur . Nous commençons par le Fichier CSS:

puis le dernière version de jQuery depuis le référentiel de bibliothèques AJAX de Google:

et enfin notre Fichier JavaScript :

Maintenant notre devrait ressembler à ceci:

Mettons des codes pour les nos boutons à l'intérieur tag:

Explication: Nous avons créé des paragraphes pour deux boutons, chacun entouré de avec hyperlien à l'intérieur. Ligne 1: class = "button1" est placé à l'intérieur , tandis que la ligne 2: class = "button1" est placé à l'intérieur

 .button1 / * Bouton avec CSS uniquement * / background: url (images / download.png) 0 0; hauteur: 65px; largeur: 580px; bloc de visualisation;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; hauteur: 65px; largeur: 580px; bloc de visualisation;  .button2 a background-position: 0 0;  

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