Criando Botões com Imagens - C# Brasil


Criando Botões com Imagens

Olá leitor, hoje vamos ver um artigo um pouco diferente porem não menos importante.
Veremos como criar botões mais estilizados, simples, sofisticados e de fácil modificação somente usando CSS. A diferença que aplicaremos esse estilo em botões do próprio ASP.NET igual ao exemplo abaixo.

Botões mais estilizados, simples, sofisticados e de fácil modificação

Botões mais estilizados, simples, sofisticados e de fácil modificação



Primeiro crie uma nova página ASP.NET e adicione um ou mais botões que se encontra na barra de ferramentas do Visual Studio.

Na propriedade CssClass do botão adiconaremos a classe sites que iremos criar logo a seguir.

Agora adicionaremos o um icone ao projeto e aplicaremos o seguinte CSS:


<style type="text/css">
    input[type=button], input[type=submit]
    {
        padding: 0 20px 0 42px;
        height: 42px;
        border: 1px solid #B60000;
        min-width: 150px;
    }
    input[type=button].sites, input[type=submit].sites
    {
        background: transparent url('icones/Sites.png') left center no-repeat;
    }
    input[type=button]:hover, input[type=submit]:hover
    {
        background-color: #666;
        color: #FFF;
    }
</style>

Bom, se tudo estiver correto teremos logo o resultado esperado.

Pronto! Agora você já pode criar aplicações web sofisticadas em ASP.NET com interfaces mais agradáveis para seus clientes e/ou usuários.

Nada impede de utilizar outros tipos de icones. Nesse caso utilizei icones do tipo PNG, mais poderiamos utilizar JPEG ou GIF.
Altere os icones, cores, fontes ou o que achar melhor e veja o resultado.

Código fonte: Botão com Imagens

Espero que seja útil.
Abraço e sucesso!!!

Postado em ASP.NET, C#, CSS, Visual Studio | Marcado como , , ,

12 respostas para “Criando Botões com Imagens”

  1. Kleiton disse:

    o Vs 2008 no aceita a classe site

  2. A classe site é um style (CSS).
    Disponibilizei para você o fonte do artigo.

    Abraço

  3. JORGE disse:

    Estou usando XP, VS 2005 e IE6. Tentei implementar a minha aplicação com as dicas e como não funcionou descidí testar exatamente a aplicação em anexo, mas também não apareceram as figuras nos botões.
    Está faltando algum detalhe?

  4. Olá Jorge,

    Temos duas soluções:
    1- Atualiza o browser para o IE7, IE8, Firefox, Opera ou Safari
    2- Mudar a imagem e usar ao inves de PNG, utilizar GIF ou JPEG.

    Abraço

  5. jose luis disse:

    boa noite amigo, adorei a dica, grato

  6. Andre disse:

    testou esse css no ie6?

    eu uso a tecnica replacement pra substituir textos ou botoes por imagens

    text-indent:-9000em;
    display:block;
    overflow:hidden;
    background:url() no-repeat;
    width:;
    height:;

    ou eu crio uma classe chamada replace e depois soh coloco onde for fazer a ação ex:

    ae no css
    apenas

    .replace {
    text-indent:-9000em;
    display:block;
    overflow:hidden;
    }

    e no link
    a.umaclasse {
    background:url() no-repeat;
    width:;
    height:;
    }

    facilimo funciona em todos os browsers ^^

  7. Andre disse:

    o meu html nao apareceu
    seria
    dentro da tag do link por exemplo

    class=”umaclasse replace”

    vamos ver se agora aparece

  8. Sim é um jeito de se fazer, porem a idéia é utilizar para botões do ASP.NET e do HTML porem no IE6 não ira funcionar porque ele não suporta PNG.

  9. kamilla disse:

    Olá… estou com problemas para inclui a imagem no botão, poderia ser mais claro quanto a essa parte?

  10. Kamilla,

    Que tipo de problema esta tendo? Como você está fazendo?

  11. Anderson Santos disse:

    Raphael Cardoso e como eu faço para colocar o texto contendo o nome do botão na parte inferior???

  12. Basta alterar o CSS:


    input[type=button], input[type=submit]
    {
    padding: 42px 20px 10px 20px;
    height: 72px;
    border: 1px solid #B60000;
    min-width: 150px;
    }
    input[type=button].sites, input[type=submit].sites
    {
    background: transparent url('icones/Sites.png') center top no-repeat;
    }
    input[type=button]:hover, input[type=submit]:hover
    {
    background-color: #666;
    color: #FFF;
    }

Deixe uma resposta