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