Embed Size (px)
DESCRIPTION
Estilizando botões com imagem de fundo, através de CSS
Citation preview
O seguinte comando pode ser utilizado para criar um botão numa página WEB:-
<input type=“button” value=“Clique” id=“btnEnviar”>
O resultado disto é um simples botão:-
Outros comandos podem gerar o mesmo tipo de botão acima, em HTML e são similares em seu funcionamento:-<input type=“submit” value=“Enviar”><input type=“reset” value=“Limpar Dados”>
Algo que os desenvolvedores costumam fazer quando trabalham com botões édesenvolver uma figura e utilizá-la como fundo do botão.
Exemplo (Copie as imagens abaixo, gravando-as em arquivos separados):-
O CSS permite que um usuário defina o fundo de um objeto.
Para isto, utilizamos a propriedade background, que nos permite informar uma imagem no fundo de um objeto. Para definirmos que um detreminado botão utilize uma imagem de fundo, configuramos este botão, referenciando-o seu ID btnEnviar no CSS. Exemplo:-
<html><head><style>
#btnEnviar {background: url(fundo.jpg);
}</style>...
Ao inserirmos esta imagem de fundo, percebemos que certos atributos do botão não são influenciados por esta imagem. Vejamos:-
Notas
(1)Não esqueça de utilizar # para referenciar o botão pelo seu ID.
(2) Deve-se informar o nome do arquivo contendo a imagem de fundo no parâmetro background, dentro de url
(veja à esquerda), sem utilizar aspas.
(3) Salve a página antes de tentar executá-la, para que o navegador saiba onde está a imagem de fundo.
Ao aplicarmos os estilos em diversos botões, percebemos que os atributos dos botões se mantêm:-
Quando se define uma imagem de fundo, via CSS, para um objeto HTML, ela será exibida de acordo com o tamanho do objeto (largura e altura). Seránecessário efetuar um ajuste nas propriedades do botão, de tal forma que ele exiba completamente a imagem de fundo.
Primeiro PassoPrimeiro Passo
Vamos começar definindo as seguintes propriedades do botão:-Largura: 90 pixels Altura: 32 pixels.
<html><head><style>
#btnEnviar {background: url(fundo.jpg);width: 90px;
height:32px;}</style>...
O resultado é:-
Um pequeno ajuste no padding e temos um botão com o texto mais centralizado:-
Padding é a propriedade que determina a distância entre o conteúdo de um elemento e suas fronteiras.
No comando à direita, informamos o padding na seguinte seqüência: topo, direita, fundo e esquerda. A unidade de medida que está sendo utilizado, neste exemplo, é em pixels.
<html><head><style>
#btnEnviar {background: url(fundo.jpg);width: 90px;height:32px;padding:3px 10px 10px 10px;
}</style>...
Porque não aproveitamos e estilizamos o texto dentro do botão?<html><head><style>
#btnEnviar {background: url(fundo.jpg);width: 90px;height:32px;padding:0px 10px 10px 10px;font-family:Verdana;
font-size:10px;
font-weight:bold;
color:blue;}</style>...
Ficou mais interessante ?
Bom, sempre tem aquele desenvolvedor que vai falar assim:-Tudo bem, mas ainda tem uma borda ao redor do botão. Como é que Eu tiro esta borda?
OK, vamos lá. Esta é a parte mais fácil: É só utilizar a Propriedade border-style e deixar none <html>
<head><style>
#btnEnviar {background: url(fundo.jpg);width: 90px;height:32px;padding:0px 10px 10px 10px;font-family:Verdana;font-size:10px;font-weight:bold;color:blue;border-style:none;
}</style></head><body><input type=“button” value=“Clique”id=“btnEnviar”></body></html>
Só que um problema aparece. Uma vez retirada a borda, o fundo do botão que a borda estava escondendo aparece. E agora ?
Esta resposta também é fácil. Temos duas opções:-
A primeira delas é alterar o atributo background, configurando o CSS a não repetir a imagem dentro do botão:-
background: url(fundo.jpg) no-repeat;
A segunda opção que temos é diminuir a largura e altura do botão, através dos atributos width e height:-width: 80px;
height:28px;
