Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS - Estilizando Botões

    Caricato da

    Carlos Majer
    32K visualizzazioni7 pagine
    Estilizando botões com imagem de fundo, através de CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Estilizando botões com imagem de fundo, através de CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    32K visualizzazioni7 pagine

    CSS - Estilizando Botões

    Caricato da

    Carlos Majer
    Estilizando botões com imagem de fundo, através de CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 7

    Estilizando Botões via CSS

    Carlos Majer
    cmajer@uol.com.br
    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:-
    Notas
    <html>
    (1)Não esqueça de utilizar # para referenciar o botão pelo
    <head>
    seu ID.
    <style>
    #btnEnviar { (2) Deve-se informar o nome do arquivo contendo a
    imagem de fundo no parâmetro background, dentro de url
    background: url(fundo.jpg);
    (veja à esquerda), sem utilizar aspas.
    }
    </style> (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.

    <html>
    <head>
    <style> O resultado é:-
    #btnEnviar {
    background: url(fundo.jpg);
    width: 90px;
    height:32px;
    }
    </style>
    ...
    Um pequeno ajuste no padding e temos um botão com o texto mais centralizado:-

    <html>
    <head>
    <style>
    #btnEnviar {
    background: url(fundo.jpg);
    width: 90px;
    Padding é a propriedade que determina a distância entre o conteúdo de height:32px;
    um elemento e suas fronteiras. padding:3px 10px 10px 10px;
    }
    No comando à direita, informamos o padding na seguinte seqüência: </style>
    topo, direita, fundo e esquerda. A unidade de medida que está sendo ...
    utilizado, neste exemplo, é em pixels.

    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;
    Ficou mais interessante ? color:blue;
    }
    </style>
    ...
    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


    <html>
    Propriedade border-style e deixar none <head>
    <style>
    #btnEnviar {
    background: url(fundo.jpg);
    width: 90px;
    height:32px;
    padding:0px 10px 10px 10px;
    font-family:Verdana;
    font-size:10px;
    Só que um problema aparece. Uma vez font-weight:bold;
    retirada a borda, o fundo do botão que a borda color:blue;
    estava escondendo aparece. E agora ? border-style:none;
    }
    </style>
    </head>
    Esta resposta também é fácil. Temos duas opções:- <body>
    <input type=“button” value=“Clique”
    A primeira delas é alterar o atributo background, id=“btnEnviar”>
    configurando o CSS a não repetir a imagem dentro do botão:- </body>
    </html>
    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;

    Potrebbero piacerti anche