Simple botón Llamada a la acción con CSS y jQuery

Llamada a la acción en diseño web es un término utilizado para los elementos en una página web que solicita una acción del usuario (hacer clic, desplazarse, etc.). Hoy vamos a Crea un botón de llamada a la acción efectivo e impresionante con algunos CSS y jQuery que captan la atención del usuario y lo atraen a hacer clic .

A lo largo de este tutorial, explicaremos cada línea de código usado con detalles y esperamos que sea útil para usted. Los siguientes usos tutoriales. HTML, CSS y jQuery con nivel de dificultad Principiante y un tiempo estimado de finalización de 45 minutos.

Descargar Tutorial (.zip) o Manifestación

Parte I - Crear la imagen del botón

En esta primera parte, le mostraremos cómo crear las imágenes necesarias con Photoshop en simples y sencillos pasos. Empecemos.

Crear un nuevo documento de Photoshop. con un ancho de 580px y una altura de 130px. Ir Ver > Nueva guia a continuación, establezca la Orientación a Horizontal y el Posición a 65px.

Crear más guías; Cada uno para la parte superior, inferior, izquierda y derecha. Tu imagen debe tener estas siguientes guías una vez que hayas terminado:

Las guías parecen dividir tu lienzo en mitades superior e inferior. Selecciona el Herramienta Rectangular Redondeada, selecciona el Radio a 5px y dibuja una forma rectangular en la mitad superior del lienzo.

Cambiar los estilos para Gradiente de superposición y Carrera.

Selecciona el Tipo Herramienta y tipo “Descargar” como texto de ejemplo en el cuadro que ha creado. Alinee el texto en el centro del centro del cuadro y su salida debería tener este aspecto:

Terminamos la creación del primer estado del botón de descarga. Vamos a crear un nuevo grupo y mover todas las capas en ella. Duplicar el grupo y luego posicionarlo bajo el primer grupo. hemos creado.

Dirígete al grupo duplicado y cambia el Gradiente de superposición y Carrera estilo de nuestra segunda caja rectangular (la que está flotando) con los siguientes ajustes:

Con el segundo grupo seleccionado, use Movimiento Herramienta para mover toda la caja rectangular a la segunda mitad del lienzo..

¡Eso es! Terminamos con la primera parte. Guarda tu imagen como descargar.png y enciende tu editor de código favorito.

Descargar PSD

Parte II - El HTML

Paso 1 - Preparar los archivos necesarios.

Crea una carpeta y dale un nombre. Lo nombraremos jQueryCallToaction para este tutorial. Dentro jQueryCallToaction carpeta, crea estos archivos / carpetas siguientes:

1. Archivo HTML en blanco, index.html
2. Archivo CSS en blanco, style.css
3. Archivo JavaScript en blanco, script.js
4. Carpeta, llamada "imagenes"
5. Lugar descargar.png dentro imagenes carpeta.

Paso 2 - Enlace index.html con CSS y JS

Unamos nuestro CSS y JavaScript a index.html. Colocarlos dentro . Comenzamos con el Archivo CSS:

entonces el última versión de jQuery del repositorio de bibliotecas AJAX de Google:

y finalmente nuestro Archivo JavaScript :

Ahora nuestra Debería verse algo como esto:

Pongamos códigos para nuestros botones en el interior. etiqueta:

Explicación: Hemos creado párrafos para dos botones, cada uno envuelto con con hipervínculo dentro. Línea 1: class = "button1" se coloca dentro , mientras que la línea 2: class = "button1" se coloca dentro

 .button1 / * Button with CSS only * / background: url (images / download.png) 0 0; altura: 65px; ancho: 580px; bloqueo de pantalla;  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px;  

 .button2, .button2 a background: url (images / download.png) 0 -65px; altura: 65px; ancho: 580px; bloqueo de pantalla;  .button2 a background-position: 0 0;  

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