Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • CSS Estilizando Botoes 456028

    Enviado por

    Kleber Gracia
    10 visualizações7 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações7 páginas

    CSS Estilizando Botoes 456028

    Enviado por

    Kleber Gracia

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 7

    Estilizando Botes via CSS

    Carlos Majer cmajer@uol.com.br

    O seguinte comando pode ser utilizado para criar um boto numa pgina WEB:<input type=button value=Clique id=btnEnviar> O resultado disto um simples boto:-

    Outros comandos podem gerar o mesmo tipo de boto acima, em HTML e so similares em seu funcionamento:<input type=submit value=Enviar> <input type=reset value=Limpar Dados>

    Algo que os desenvolvedores costumam fazer quando trabalham com botes desenvolver uma figura e utiliz-la como fundo do boto. Exemplo (Copie as imagens abaixo, gravando-as em arquivos separados):-

    O CSS permite que um usurio 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 boto utilize uma imagem de fundo, configuramos este boto, referenciando-o seu ID btnEnviar no CSS. Exemplo:<html> <head>

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


    ...

    Notas (1)No esquea de utilizar # para referenciar o boto pelo seu ID. (2) Deve-se informar o nome do arquivo contendo a imagem de fundo no parmetro background, dentro de url (veja esquerda), sem utilizar aspas. (3) Salve a pgina 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 boto no so influenciados por esta imagem. Vejamos:-

    Ao aplicarmos os estilos em diversos botes, percebemos que os atributos dos botes se mantm: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 necessrio efetuar um ajuste nas propriedades do boto, de tal forma que ele exiba completamente a imagem de fundo. Primeiro Passo Vamos comear definindo as seguintes propriedades do boto:Largura: 90 pixels Altura: 32 pixels.
    <html> <head> <style> #btnEnviar { background: url(fundo.jpg);

    O resultado :-

    width: 90px; height:32px;


    } </style> ...

    Um pequeno ajuste no padding e temos um boto com o texto mais centralizado:<html> <head> <style> #btnEnviar { background: url(fundo.jpg); width: 90px; height:32px;

    Padding a propriedade que determina a distncia entre o contedo de um elemento e suas fronteiras. No comando direita, informamos o padding na seguinte seqncia: topo, direita, fundo e esquerda. A unidade de medida que est sendo utilizado, neste exemplo, em pixels.

    padding:3px 10px 10px 10px;


    } </style> ...

    Porque no aproveitamos e estilizamos o texto dentro do boto?


    <html> <head> <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;


    } </style> ...

    Bom, sempre tem aquele desenvolvedor que vai falar assim:Tudo bem, mas ainda tem uma borda ao redor do boto. Como que Eu tiro esta borda? OK, vamos l. Esta a parte mais fcil: 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;

    S que um problema aparece. Uma vez retirada a borda, o fundo do boto que a borda estava escondendo aparece. E agora ?
    Esta resposta tambm fcil. Temos duas opes:A primeira delas alterar o atributo background, configurando o CSS a no repetir a imagem dentro do boto:background: url(fundo.jpg) no-repeat; A segunda opo que temos diminuir a largura e altura do boto, atravs dos atributos width e height:width: 80px; height:28px;

    border-style:none;
    } </style> </head> <body> <input type=button value=Clique id=btnEnviar> </body> </html>

    Você também pode gostar