Simples Call To Action Button Com CSS & jQuery

Apelo à ação em web design é um termo usado para elementos em uma página da web que solicitam uma ação do usuário (clicando, pairando, etc). Hoje vamos crie um botão de ação e ação eficaz e incrível com alguns CSS e jQuery que chamam a atenção do usuário e o levam a clicar .

Ao longo deste tutorial, explicaremos todas as linhas de código usadas com detalhes e esperamos que seja útil para você. O tutorial a seguir usa HTML, CSS e jQuery com dificuldade Principiante e um tempo de conclusão estimado de 45 minutos.

Download do tutorial (.zip) ou Demonstração

Parte I - Crie a imagem do botão

Nesta primeira parte, mostraremos como criar as imagens necessárias com o Photoshop em simples etapas simples. Vamos começar.

Crie um novo documento do Photoshop com uma largura de 580px e uma altura de 130px. Vamos para Visão > Novo guia depois, defina o Orientação para Horizontal e a Posição para 65 px.

Crie mais guias; cada para o topo, inferior, esquerda e direita. Sua imagem deve ter estes guias a seguir assim que você terminar:

As guias parecem dividir sua tela em metades superior e inferior. Selecione os Ferramenta Retangular Arredondada, colocou o Raio para 5px e desenhe uma forma retangular na metade superior da tela.

Alterar os estilos para Sobreposição de Gradiente e Acidente vascular encefálico.

Selecione os Tipo Ferramenta e tipo “Baixar” para como texto de exemplo na caixa que você criou. Alinhe o texto ao meio central da caixa e sua saída deve ser algo como isto:

Nós terminamos a criação do primeiro estado do botão de download. Vamos criar um novo grupo e mova todas as camadas para dentro. Duplicar o grupo e, em seguida, posicione-o no primeiro grupo. nós criamos.

Vá até o grupo duplicado e mude o Sobreposição de Gradiente e Acidente vascular encefálico estilo da nossa segunda caixa retangular (a pairada) com os seguintes assentamentos:

Com o segundo grupo selecionado, use Mover ferramenta para mover toda a caixa retangular até a segunda metade da tela.

É isso aí! Nós terminamos com a primeira parte. Salve sua imagem como download.png e inicie seu editor de código favorito.

Baixar PSD

Parte II - O HTML

Passo 1 - Prepare os arquivos necessários

Crie uma pasta e dê um nome a ela. Vamos nomeá-lo jQueryCallToaction para este tutorial. Dentro jQueryCallToaction pasta, crie os seguintes arquivos / pastas:

1. Arquivo HTML em branco, index.html
2. Arquivo CSS em branco, style.css
3. Arquivo JavaScript em branco, script.js
4. Pasta, chamada "imagens"
5. Lugar, colocar download.png dentro imagens pasta.

Etapa 2 - Link index.html com CSS e JS

Vamos ligar nosso CSS e JavaScript para index.html. Coloque-os dentro . Nós começamos com o Arquivo CSS:

então o versão mais recente do jQuery do repositório de bibliotecas AJAX do Google:

e finalmente nossa Arquivo JavaScript :

Agora nossa deve ser algo como isto:

Vamos colocar códigos para os nossos botões dentro tag:

Explicação: Criamos parágrafos para dois botões, cada um embrulhado com com hiperlink dentro. Linha 1: class = "button1" é colocado dentro , enquanto a linha 2: class = "button1" é colocado dentro

 .button1 / * Botão somente com CSS * / background: url (images / download.png) 0 0; altura: 65px; largura: 580px; display: bloco;  .button1: hover / * mouseOver * / background: url (imagens / download.png) 0 65px;  

 .button2, .button2 a background: url (imagens / download.png) 0 -65 px; altura: 65px; largura: 580px; display: bloco;  .button2 a posição de fundo: 0 0;  

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