Exemplo de botão com rollover 1 em CSS

Rollover 1 CSS
Para este exemplo devemos ter 3 imagens que funcionarão como;
Repouso

Sobre

Mantido para baixo

Então, no corpo do nosso site, temos esse
Código:


COMEÇO

E assim, para todos os nossos botões, depois de usarmos CSS, começamos com este código:
Código:

# bot1 {
fronteira: 0 0 0 0;
preenchimento: 0;
alinhamento de texto: centro;
}
Onde dizemos que não queremos margem externa e interna, alinhamos o texto ao centro, agora continuamos com este código:
Código:

# bot1 para {
imagem de fundo: url (bg_menu_1.jpg);
posição de fundo: centro superior;
altura: 30px;
largura: 100px;
display: bloco;
cor: # 990000;
decoração de texto: nenhum;
acolchoamento superior: 5px;
repetição de fundo: sem repetição;
intensidade da fonte: Negrito;
}
Que ele é praticamente quem faz tudo, vamos ver linha por linha
imagem de fundo: url (bg_menu_1.jpg);
Com isso dizemos que queremos uma imagem de fundo e damos o caminho deste
posição de fundo: centro superior;
Com isso estamos indicando que a posição da imagem de fundo será centrada e para cima.

repetição de fundo: sem repetição;
Para que o fundo não se repita como se fosse um padrão.
altura: 30px;
largura: 100;
Informamos que a altura será 30 e a largura 100px, que são as dimensões de nossas imagens de fundo.
display: bloco;
Para que gere e respeite uma caixa com as medidas que colocamos antes.
cor: # 990000
Com isso estamos apenas dando uma cor ao texto que está dentro da nossa caixa.
decoração de texto: nenhum;
É para evitar a linha que fica abaixo dos links.
acolchoamento superior: 5px;
Para que eu economize um espaço de 5px na parte superior do nosso link e com isso abaixe a posição para o centro da nossa caixa.
intensidade da fonte: Negrito;
Coloca as letras em negrito
Então você só precisa adicionar classes para os pseudoelementos "hover" e "focus"
Código:

# bot1 a: hover {
imagem de fundo: url (bg_menu_2.jpg);
}
# bot1 para: focus {
imagem de fundo: url (bg_menu_3.jpg);
}
Mas, conforme percebemos, apenas mudamos o caminho de nossas imagens de fundo para alcançar o efeito que estávamos procurando.
O código do nosso exemplo de rollover em css mostrado abaixo:
Código:








COMEÇO


E as imagens podem ser baixadas desta página, clicando com o botão direito na imagem e salvando como.