[Resolvido] Botão com 3 imagens

[Nigol 0]

Olá,

 

no site que estou criando me foi passadas 3 imagens, que serão o padrão de meus botões, eu necessito colocar uma imagem a esquerda e uma a direita e o meio do botão, todos com imagens diferentes pois não temos espaço para criar N imagens.

 

como pdoeria fazer isto?

 

já tenho a imagem do meio:

#btn
{
	border:0;
	background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_expansivel.jpg');
	background-repeat:repeat-x;
}

[William Bruno 1501]

veja como resolvi este menu:

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__p__1341165entry1341165

ou seja, apenas 2 imagens.

[Eliseu M. 2]

Eu não entendi bem o conceito de não terem "espaço" para criar N imagens, mas beleza. Procure os seletores :before e :after, eles podem ajudar.

[Nigol 0]

Opa WIliam e Eliseu...

 

1º william me perdi no arquivo que me recomendastes.

 

2º Eliseu tentei fazer o uso do :before e do :after, mas não consegui resolver...

 

tenho o seguinte html:

<input type='submit' class='btn' name='sub' value='Logar'>

e o seguinte CSS:

.btn
{
	border:0;
	width:80px;
	height: 20px;
	background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_expansivel.jpg')repeat-x;
}
.btn:before{
	background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_esquerda.jpg')repeat-x;
}	
.btn:after{
	background:URL('http://rsilva.tet.com.br/site/site/img/botao/bt_direita.jpg')repeat-x;
}

[Evandro Oliveira 331]

Comece alterando de input para button. Primeiro por questões semânticas, depois por questões de flexibilidade.

<button type="submit">Logar</button>

 

O uso de :after e :before requer a propriedade content que será a responsável pelo conteúdo renderizado:

button { background: url('bg-botao.jpg') repeat-x top left; }
button:after { content: url('borda-esq.jpg'); }
button:before { content: url('borda-dir.jpg'); }

[Nigol 0]

vlw. agora deu certo