4

Eu estava criando um botão com background: feito com um sprite, porém, ele fica todo errado, eu quero que ele fique igual a este:

Botão Normal Botão com :hover

Só que ele está todo bugado, assim:

Botão Bugado

Meu CSS:

.botao {    
    background:url(http://testetabela.esy.es/botoes.png) 0 0;
    color: #fff;
    padding:10px;
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 transparent;
    -moz-box-shadow: 0 1px 0 transparent;
    -webkit-box-shadow: 0 1px 0 transparent;
    position:relative;
    font-family: Tahoma, Geneva, sans-serif;
    z-index:0;
}
.botao:hover {
    background:url(http://testetabela.esy.es/botoes.png) -8px 0;
}

Exemplo

Gostaria de deixá-lo como nas duas primeiras imagens, a 1ª é o botão normal, a 2ª é o botão com :hover.

3

3 Respostas 3

7

Eu usaria gradientes por CSS como o @Sergio e o @PauloMaciel sugeriram. Mas se você quer mesmo usar imagens, elas precisam estar empilhadas na sua spritesheet, que pode ter 2px por 100px:

inserir a descrição da imagem aqui

Aí é só deslocar a imagem no eixo Y no :hover:

.botao:hover {
    background-position: 0 -50px;
}

Exemplo

1
  • Obrigado, isso mesmo que queria! Vlw!!! 4/05/2014 às 4:40
4

O problema aqui é que você está a usar uma imagem que por sí já tem esse efeito zebra. Para usar imagens de fundo dessa maneira, que no fundo são tiras pequenas que se repetem na horizontal, então a imagem não pode ter nada de branco.

Para usar sprites então a sua imagem original tem de ter as duas imagens inteiras, não vejo como ter duas tiras/linhas com espaço entre elas na mesma imagem e fazer repeat só da parte que procura. Então aí teriam de estar como o @bfavareto sugere, uma em cima da outra.

Uma imagem/sprite com o botão completo seria assim (imagem/ficheiro único):

inserir a descrição da imagem aqui

e no CSS:

background-image:url('https://i.stack.imgur.com/Zi14e.jpg');
background-position:-5px 0px;

e para a outra parte da imagem

background-image:url('https://i.stack.imgur.com/Zi14e.jpg');
background-position:-115px 0px;

Exemplo


Pode também usar somente CSS, pode por exemplo usar esta ferramenta para escolher cores e ao clicar pode ver o CSS.

Somente com CSS a sua imagem vai precisar de:

gradient: para ter cor diferente no topo e no fundo
border-radius: para fazer os cantos redondos

Exemplo

.botao {
    margin-top: 40px;
    border-top: 1px solid #000000;
    background: #000000;
    background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#000000));
    background: -webkit-linear-gradient(top, #777, #000000);
    background: -moz-linear-gradient(top, #777, #000000);
    background: -ms-linear-gradient(top, #777, #000000);
    background: -o-linear-gradient(top, #777, #000000);
    padding: 13px 26px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
    color: white;
    font-size: 19px;
    font-family:'Lucida Grande', Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
}
.botao:hover {
    border-top-color: #28597a;
    background: #0422ba;
    background: -webkit-gradient(linear, left top, left bottom, from(#27274f), to(#0422ba));
    background: -webkit-linear-gradient(top, #27274f, #0422ba);
    background: -moz-linear-gradient(top, #27274f, #0422ba);
    background: -ms-linear-gradient(top, #27274f, #0422ba);
    background: -o-linear-gradient(top, #27274f, #0422ba);
    color: #ccc;
}
9
  • Não, eu não quero gradient, eu quero somente com meu sprite, ele está em PNG!! 4/05/2014 às 3:58
  • @AlexandreLopes, mas o seu sprite não tem cor escura, só azul e branco.
    – Sergio
    4/05/2014 às 3:59
  • Eu já estou fazendo com imagem porque gradient não funciona no internet explorer! Antes estava com duas imagens, só que eu quis juntar e criar um sprite. 4/05/2014 às 4:01
  • Esta imagem que está lá: testetabela.esy.es/botoes.png 4/05/2014 às 4:01
  • Nesse sprite: testetabela.esy.es/botoes.png possui duas listras preto e azul, cada uma com 2px de largura. 4/05/2014 às 4:05
2

Você pode fazer isso utilizando apenas css:

CSS

.botao {
    background: -webkit-linear-gradient(#3f3f40, #161617); /* For Safari 5.1 to 6.0 */   
    background: -o-linear-gradient(#3f3f40, #161617); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#3f3f40, #161617); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#3f3f40, #161617); /* Standard syntax */
    border-radius:4px;
    text-decoration:none;
    color: #fff;
    padding:10px;
    border-bottom: 1px solid #000;      
    position:relative;
    font-family: Tahoma, Geneva, sans-serif;
    z-index:0;
}
.botao:hover {
    background: -webkit-linear-gradient(#164fda, #121fa0); /* For Safari 5.1 to 6.0 */   
    background: -o-linear-gradient(#164fda, #121fa0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#164fda, #121fa0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#164fda, #121fa0); /* Standard syntax */
}

Veja no JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .