none
Como colocar ícones no asp.net button? RRS feed

  • Pergunta

  • Olá pessoal,

    Vou fazer uma pergunta que aparentemente já sei a resposta, mas gostaria da opinião de vocês.

    Gostaria de fazer um botão que possui ícone e texto, utilizando o asp.net button (veja o botão "Enviar" dos posts aqui nos fóruns MSDN).

    Bem aí vem a questão:

    • Porque não utilizar image button?
      Não quero ter o trabalho de ter que fazer uma imagem para todo botão que precisar, gostaria apenas de setar o ícone.
       
    • Desenvolver um custom control?
      É possível desenvolver um custom control que herde do asp.net button, e possua uma propriedade "icon"?
      Se for possível, alguém poderia me ajudar a dizer como fazê-lo?

    Bem, é isso.
    Qualquer idéia e opinião é muito bem vinda.

    Obrigado pela ajuda de sempre!

    Abraços!


    Leandro Faria
    quarta-feira, 10 de março de 2010 20:34

Respostas

  • Use css e seja feliz:

    ex css:

    .btexcluir{
      background:url(images/bt_excluir.png) no-repeat left;
      padding-left:20px;
    //use os atributos css para ajustar o posicionamento da imagem e do texto
    }

    No seu asp:button basta setar a propriedade CssClass="btexcluir"

    O ideal é você setar o css em um arquivo separado e incorporar o mesmo às suas páginas aspx via <link rel="stylesheet" type="text/css" href="botoes.css" />
    • Marcado como Resposta Leandro Faria quarta-feira, 10 de março de 2010 21:56
    quarta-feira, 10 de março de 2010 21:15

Todas as Respostas

    • Porque não utilizar image button?
      Não quero ter o trabalho de ter que fazer uma imagem para todo botão que precisar, gostaria apenas de setar o ícone. 
             Eu uso e acho bem simples, e vc ter definido todas as seu botões e utilizar o resources :)
    • Desenvolver um custom control?
      É possível desenvolver um custom control que herde do asp.net button, e possua uma propriedade "icon"?
      Se for possível, alguém poderia me ajudar a dizer como fazê-lo?
             Tb é simples de fazer, mais vc ter o mesmo trabalho de setar as imagens para ele, so se vc criar um button para cada operação sua, mais não sei se isso vale muito a pena, quando eu fiz isso eu fiz um layout para o bottão e so escrevia o texto que eu queria dentro dele, mais não dava para deixar uma imagens mais legais, ficava algo meio estatico.


    da uma lida
    http://www.aspfree.com/c/a/ASP.NET/ASPNET-Custom-Server-Controls-Cute-Image-Hover-Button/
    quarta-feira, 10 de março de 2010 20:40
    Moderador
  • Use css e seja feliz:

    ex css:

    .btexcluir{
      background:url(images/bt_excluir.png) no-repeat left;
      padding-left:20px;
    //use os atributos css para ajustar o posicionamento da imagem e do texto
    }

    No seu asp:button basta setar a propriedade CssClass="btexcluir"

    O ideal é você setar o css em um arquivo separado e incorporar o mesmo às suas páginas aspx via <link rel="stylesheet" type="text/css" href="botoes.css" />
    • Marcado como Resposta Leandro Faria quarta-feira, 10 de março de 2010 21:56
    quarta-feira, 10 de março de 2010 21:15
  • Seilor,

    Muito obrigado pela ajuda, dei uma lida no post e realmente é tranquilo desenvolver o controle.

    John,

    Esta solução é simplismente perfeita.
    Não dá trabalho nenhum e o resultado ficou exelente.

    Como foi que eu não pensei nisto antes?

    Parabéns!

    Fiz questão de tirar um print screen para vocês verem o resultado:



    Muito obrigado a todos!

    Abraços!
    Leandro Faria
    quarta-feira, 10 de março de 2010 21:54
  • Leandro,

    Como você fez no arquivo CSS para posicionar a imagem?

    Eu estou tentando utilizar o background para setar a imagem, mas ora ela fica repetida, ora fica perdida. Eu acredito que seja problema de repeat no-repeat. Se puder ajudar eu agradeço.

    segunda-feira, 6 de dezembro de 2010 14:50
  • Marcos,

    background-image:url(_arquivo_ico.jpg); //propriedade que carrega o arquivo imagem para o seu botão

    background-position: top left; //posição do bg, (top, center, bottom) e (left, center, right)

    background-repeat: no-repeat; // estilo de repetição ou posição

     

    link sobre um ótimo texto sobre background em css http://maujor.com/tutorial/backtut.php

     

    Boa sorte!



    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"
    segunda-feira, 6 de dezembro de 2010 16:48