Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 2
Sexo: Masculino

Botão com Efeito Flexível.

14-10-2012 14:19

Botão com Efeito Flexível

Sabe aqueles botõezinhos de máquinas? Então, que tal você criar um para seu site? Veja como é simples:

-----------------------------------------------------------------------------------------

Você irá precisar de:
  • Adobe PhotoShop ou qualquer editor de imagens.
  • Adobe DreamWeaver ou qualquer editor de scripts.
» Começando

Primeiro, abra seu editor de imagens, aqui iremos usar o PhotoShop CS5.
Para o meu botão, fiz o seguinte...
Imagem

Criei um novo arquivo, de tamanho 120px X 50px.
Fiz o botão, com o seguinte estilo:
1° Adicionei um Grandient.
2° Adicionei uma borda - Cinza, 2px, Centralizada.
3° Adicionei uma sombra, as configurações foram as seguintes:
Imagem

Depois, fiz a segunda parte do botão, e para isso, eu diminui a distância da sombra para 5px.

Após ter feito isso, passe as duas imagens, para um arquivo com a altura das imagens imagens, ou seja, o meu vai ser 100. Ajuste a imagem, primeiro coloque a parte de cima, depois coloque a de baixo, lembrando, que uma vai substituir a outra, então, tem que deixar a de baixo como se tivesse em cima da de cima.

Meu resultado, foi esse:
Imagem

» Trabalhando no CSS
Agora vamos trabalhar com o css para "ajeitarmos" o botão certinho.

O meu css ficou assim:

<style type="text/css"> .btn {         background:url(http://localhost/cnw/button.png) no-repeat;         width:120px;         height:50px;         display:block;         text-indent:-9999px; <!-- Para Não Aparecer o Texto. --> } .btn:active{         background-position:0 -50px; } </style>

Agora você irá ter que ajeitar seu código. Alí em Width, coloque a largura da sua imagem, em Height, coloque a altura da sua imagem divida por 2, para não aparecer a imagem inteira. E por fim, mude no final do código, pela altura da sua imagem dividida por 2 de novo, sem tirar o sinal de negativo.

Para adicionar na sua página, basta colocar o link normal, e depois do href="#" adicionar o class="btn", ou seja, vai ficar mais ou menos assim:

<a href="#" class="btn">Botão</a>

Se você fez tudo certo, o seu resultado sairá assim: http://w3.danniel.x10.mx/button.html

Comente seu Resultado!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Botão com Efeito Flexível.

14-10-2012 15:34

Bem legal esse efeito.

MOVIDO PARA SEÇÃO DE ARTIGOS CSS
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado