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

12 comentários sobre “Criando Botões com Imagens

  1. 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?

  2. 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 ^^

    1. 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

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *