Css - Estilizando Botões

Estilizando Botões via CSS

Carlos Majer [email protected]

O seguinte comando pode ser utilizado para criar um botão numa página WEB: 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:

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:

<style> #btnEnviar { background: url(fundo.jpg); } ...

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 inserirmos esta imagem de fundo, percebemos que certos atributos do botão não são influenciados por esta imagem. Vejamos:-

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 Passo Vamos começar definindo as seguintes propriedades do botão:Largura: 90 pixels Altura: 32 pixels. <style> #btnEnviar { background: url(fundo.jpg);

width: 90px; height:32px; } ...

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.

<style> #btnEnviar { background: url(fundo.jpg); width: 90px; height:32px;

padding:3px 10px 10px 10px; } ...

Porque não aproveitamos e estilizamos o texto dentro do botão? <style> #btnEnviar { background: url(fundo.jpg); width: 90px; height:32px; padding:0px 10px 10px 10px;

Ficou mais interessante ?

font-family:Verdana; font-size:10px; font-weight:bold; color:blue; } ...

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

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;

<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; }