Scribd Logo
Upload

Welcome to Scribd!

  • CSS Estilizando Botoes

    Uploaded by

    Fabrício Reis
    20 views5 pages
    CSS Estilizando Botoes

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS Estilizando Botoes

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views5 pages

    CSS Estilizando Botoes

    Uploaded by

    Fabrício Reis
    CSS Estilizando Botoes

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    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:-

    Um
    pequeno ajuste
    no padding
    e temosbotes,
    um boto
    com o texto
    centralizado:Ao aplicarmos
    os estilos
    em diversos
    percebemos
    que mais
    os atributos
    dos
    botes se mantm:<html>
    <head>
    <style>
    #btnEnviar
    Quando se define uma imagem de fundo, via CSS, para um
    objeto{ HTML, ela
    background: url(fundo.jpg);
    ser exibida de acordo com o tamanho do objeto (largura ewidth:
    altura).
    90px; Ser
    height:32px;
    Padding
    a propriedade
    que determina
    a distncia
    o contedo de do boto, de tal forma que ele
    necessrio
    efetuar
    um ajuste
    nasentre
    propriedades
    um elemento e suas fronteiras.
    padding:3px 10px 10px

    exiba completamente a imagem de fundo.

    }
    </style>
    ...

    No comando direita, informamos o padding na seguinte seqncia:


    topo,
    direita, fundoPasso
    e esquerda. A unidade de medida que est sendo
    Primeiro
    utilizado, neste exemplo, em pixels.

    Vamos comear definindo as seguintes propriedades do boto:Largura:


    pixels
    Porque
    no 90
    aproveitamos
    e estilizamos o texto dentro do boto?
    Altura: 32 pixels.
    <html>
    <head>
    <style>
    #btnEnviar {
    background: url(fundo.jpg);

    width: 90px;
    height:32px;

    }
    </style>
    ...Ficou

    mais interessante ?

    <html>
    <head>
    <style>
    #btnEnviar {
    resultado
    :- url(fundo.jpg);
    background:
    width: 90px;
    height:32px;
    padding:0px 10px 10px 10px;

    font-family:Verdana;
    font-size:10px;
    font-weight:bold;
    color:blue;
    }
    </style>
    ...

    10px;

    You might also like