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
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!!!
o Vs 2008 no aceita a classe site
A classe site é um style (CSS).
Disponibilizei para você o fonte do artigo.
Abraço
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?
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
boa noite amigo, adorei a dica, grato
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 ^^
o meu html nao apareceu
seria
dentro da tag do link por exemplo
class=”umaclasse replace”
vamos ver se agora aparece
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.
Olá… estou com problemas para inclui a imagem no botão, poderia ser mais claro quanto a essa parte?
Kamilla,
Que tipo de problema esta tendo? Como você está fazendo?