Ir para conteúdo
Fórum Script Brasil
  • 0

Como criar Botão com background-position ?


MyMind

Pergunta

O que eu quero fazer é criar um botão com três efeitos de ativação:

1-Normal (antes de qualquer interação);

2-MouseOver (ao sobrepor o cursor);

3-MouseDown (ao clicar);

Após clicar (ou após o MouseOver) o botão volta ao Estado "Normal".

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

Só que o design do botão é complicadinho, porque ele tem cantos arredondados, e eu vou precisar usar três imagens para montá-lo, onde:

1ª-Imagem da Borda esquerda arredondada do botão

2ª-Centro (imagem de 1px verticalmente) replicável horizontalmente (repeat-x)

3ª-Imagem da Borda direita arredondada do botão

Essas três imagens tem a mesma altura (para poderem ser montadas);

A 2ª imagem tem um repeat-x que define a largura do botão;

A 1ª imagem deverá ficar alinhada em left e top em relação a 2ª imagem;

A 3ª imagem deverá ficar alinhada em right e top em relação a 2ª imagem.

Essas três imagens, desta forma, irão criar um layout leve do botão.

E depois, ainda desejo colocar um texto no centro deste botão.

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

Eu imagino que com o background-position seja possível criar este botão com os três efeitos de ativação (Normal, MouseOver e MouseDown) usando apenas três imagens:

1ª Imagem - A Imagem terá no topo dela a borda Esquerda do Efeito de Ativação Normal; e terá no centro a borda Esquerda do Efeito de Ativação MouseOver; e terá na base a borda Esquerda do Efeito de Ativação MouseDow.

2ª Imagem - A Imagem terá no topo dela o Centro de repeat-x do Efeito de Ativação Normal; e terá no centro a Centro de repeat-x do Efeito de Ativação MouseOver; e terá na base a Centro de repeat-x do Efeito de Ativação MouseDow.

3ª Imagem - A Imagem terá no topo dela a borda Direita do Efeito de Ativação Normal; e terá no centro a borda Direita do Efeito de Ativação MouseOver; e terá na base a borda Direita do Efeito de Ativação MouseDow.

Desta forma, com essas três imagens, eu imagino que seria possível montar o botão de forma leve e bonita, com os três efeitos de ativação (Normal, MouseOver e MouseDown).

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

Na teoria de como isso funciona, eu acredito que estou certo, o problema é que não faço idéia de como fazer o código disso, eu quero montar o botão através de DIVs e de acordo com o W3C.

Se alguém puder me dar uma luz eu agradeço muito mesmo...

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...