Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera do iMasters! Estou desenvolvendo um projeto para um cliente e estou enfrentando um probleminha.
Primeiro, o site é esse: http://www.boost.art.br/dev/lmt
Todos os botões nessa página(→ Visualizar a notícia completa, Completar inscrição, etc) usam a mesma classe, básicamente <p class="botao"><a href="#">botao</a></p> sendo <p> uma imagem pequena na direita que ficam no fim do botao e <a> a imagem grande que se estica de acordo com o tamanho do botão.
Tudo funciona muito bem, o problema é que no hover o <a> muda a imagem separado do <p>, além de que o fim do botão (<p>) não é linkado.Não sei explicar de forma simples ou menos técnica. Com certeza o cliente não vai notar, mas sou chato com essas coisas. Então se alguém souber de um jeito melhor, ou como arrumar isso, de preferência sem hacks javascript ou css3 eu agradeço! Abraço!
Então Diéssica, o problema de usar border-radius é que não funcionaria pra 1/3 dos usuários (IE?), ou funcionaria usando hacks, mas é uma solução que não gosto de adotar.
eu tentei aplicar o lado direito direto no <a> mas por alguma razão estranha não funcionou e o lado direito ficou por baixo do <p> (resumindo, o lado direito ficou quadrado).
O fundo único e com border radius seria o ideal, mas como me preocupo muito com compatibilidade...
De todo jeito obrigado pela resposta!
Então Kauã, dá pra fazer uma div que segure as duas divs de dentro, aí o hover vai nela.. Mas aí vai ter que trabalhar um pouco com float.
O que eu quero dizer é que não acaba sendo uma solução REEEALMENTE boa. A melhor solução vai continuar sendo com CSS3. (a não ser que 90%+ do público utilize IE, aí não vale a pena mesmo)
Não se fecha pros usuários do Internet Explorer, pelo contrário, incentiva eles a atualizar o navegador :)
É Diéssica, tô achando que o CSS3 vai ser a solução, vou usar o CSS3PIE pra ver como fica. Obrigado pela dica =]
Demorei pra entender.
Sinceramente, essa não é a melhor forma de se fazer um botão que redimensiona com o texto. Tanto que foi bem complicado de entender só o CSS...
Uma solução simples:
Faz uma div, determina o mesmo background, dá um padding de 5/8 pixels (o mesmo do botão atual) e dá um border-radius nessa div.
Ou então faz isso com classe, aí é só colocar direto no link (a class...).
:)