Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kino!

Criar botões com label flexível

Por , em Desenvolvimento frontend

Recommended Posts

kino!    0

kino!
Postado

Criei uma imagem de fundo base que é um molde de botão, e minha idéia era

aplicar o rótulo, texto do botão, de forma flexível, tipo assim:

 

Essa é a definição CSS pro link 

a.botao:link {	background-image: url("/imagens/botao.gif");	background-repeat: no-repeat;					color: #FFF;									cursor: pointer;								display: block;			font-family: Arial, Helvetica, sans-serif;		font-size: 11px;					 	font-style: normal;	font-weight: bold;	height: 25px;							text-align: center;	text-decoration: none;						width: 91px;							  }

E uso assim na página:

<td height="100%">		 		   <a href="javascript:fNovo()" class="botao">Novo</a>		 		</td>

Ou seja, sempre que precisar de um botão é só setar o href e colocar o texto

que desejar. Alguém tem alguma sugestão de como fazer isso de outra forma?

E mais importante, desse jeito funcionou, o único problema é que o texto fica

muito pra cima, já tentei alinhar, centralizar, mas não cosegui... será que é possível?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

Bicho, a tag <button> seria perfeita pra isso, senão fosse o fato de que o IE não aceita definições CSS para a pseudo classe hover para algo que não seja um link!!!

Posso não ser um grande pesquisador CSS (pior que tô tentando...), mas minha memória continua funfando, foi aqui mesmo no fórum que aprendi isso!

 

Quero trocar as imagens background no estado normal e quando o botão receber foco, ou hover, criando um efeito de "acender o botão" pode crer?

No FireFox fiz isso em 15 min, inclusive seguindo sua sugestão ficou massa:

button.botao:hover {	background-image: url("/imagens/botao_selecionado.gif");		  	background-repeat: no-repeat;								  		color: #FFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;								   	font-style: normal;	  font-weight: bold;	height: 25px;	text-align: center;	text-decoration: none;	width: 91px;}
No IE já tô de cabelo branco!! Tô ficando loco!! :D

 

Valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

é... realmente você tem razao. Quem se trumbicou fui eu. heheeh.

 

Caso você queira fazer um botão que muda no onmouseover (sem usar javascript) o jeito é usar um pseudo-botão com imagens.

 

Agora já se javascript te satisfizer (é isso mesmo o verbo?) a resposta é essa aqui, o titio Micox te entrega de mão beijada:

 

<style>button.botao , .botao_normal {		 	background-repeat: no-repeat;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;								  	font-style: normal;	  font-weight: bold;	height: 25px;	text-align: center;	text-decoration: none;	width: 91px;}button.botao:hover , .botao_hover {	background-image: url("/imagens/botao_selecionado.gif");		  	background-repeat: no-repeat;   	font-family: Arial, Helvetica, sans-serif;	color:red;	font-size: 11px;								  	font-style: normal;	  font-weight: bold;	height: 25px;	text-align: center;	text-decoration: none;	width: 91px;}</style>	   <script>function inicia_botoes(){var botoes,i;botoes = document.getElementsByTagName("button");for(i=0;i<botoes.length;i++){	if(botoes[i].className=="botao"){		botoes[i].onmouseover=function(){this.className="botao_hover";}		botoes[i].onmouseout=function(){this.className="botao_normal";}	}}}</script><body onload="inicia_botoes()"><button class=botao>Enviar</botao></body>

Testei com sucesso no FF e no IE6..

Compartilhar este post

Link para o post
Compartilhar em outros sites

THE_WATCHER    0

THE_WATCHER
Postado

Como disse o Brunão, há um jeito de fazer o :hover funcionar com Javascript. Olha só:

 

java script:

function startList() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="button") {node.onmouseover=function() {this.className+=" over";  }  node.onmouseout=function() {  this.className=this.className.replace	(" over", "");   }   }  } }}window.onload=startList;
Onde tem "nav" subistitua pelo seu id.

 

CSS:

button#id:hover, button#id.over { 	background-image: url("/imagens/botao_selecionado.gif");		  	background-repeat: no-repeat;								  	color: #FFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;								  	font-style: normal;	font-weight: bold;	height: 25px;	text-align: center;	text-decoration: none;	width: 91px;}
Sacou como a coisa funciona? No Javascript, coloque o id do que você quer "hackear". No CSS, aplique a classe over ao seletor que será "hackeado".

Se você quiser usar uma classe ao invés de um id, é só mudar no javascript, tirando o getElementById e colocando o equivalente para uma classe.

 

Ajeitei isso aqui na pressa, então não sei se vai funcionar. Veja aí.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

Fala povo! Oh, brigadão aí! Era isso que eu precisava, uma direção pra seguir! :) Valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

Putz! Testei esse lance do hack utilizando Javascript e olha só;

 

Primerio

Internet Explorer 6: Com a tag <button> o IE tem um bug. Tipo, antes de exibir a imagem do botão que eu defini no CSS, ele exibe o default do browser mesmo, aquela caixa cinza. È rápido, mais gera um efeito desagradável, um flick... e isso toda vez que passar o mouse sobre o botão claro...

Mozilla FireFox: Funciona perfeitamente!

 

Segundo

Internet Explorer 6: Com a tag <td>. O problema da caixa cinza é resolvido obviamente, mas a barra de baixo do navegador e os botões ao lado daquele que está sendo apontado pelo cursor do mouse, piscam!!

È sútil o negócio, porém bem irritante... é natal agora ô tio Bill?! :D

Mozilla FireFox: Funciona perfeitamente! Já são três formas de se fazer isso!

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Mozilla FireFox: Funciona perfeitamente! Já são três formas de se fazer isso!

Já tá na hora de colocar um gif animado que nem aqueles famosos "Melhor visualizado em Mozilla FireFox"... heheheh. brincadeira...Mas se você achar alguma solução boa posta ae...

Compartilhar este post

Link para o post
Compartilhar em outros sites

THE_WATCHER    0

THE_WATCHER
Postado

e aí kino!

 

o primeiro problema, me parece que é porque a imagem background ainda não foi carregada... por isso mostra o default. Se você setar o background com uma cor e uma imagem, antes da imagem aparecer fica a cor, sacou?

O segundo eu desconheço...

 

 

hauhauaha concordo micox! tá na hora mesmo! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

o primeiro problema, me parece que é porque a imagem background ainda não foi carregada

Realmente the_watcher, eu não havia pensado nisso.Na verdade eu acho que isso é a causa dos 2 problemas (button e Td).Poe um preload nas imagens aí e vê se resolve...

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

Eu de novo!

setar o background com uma cor

Tipo o <button> fica numa <table> que ocupa 100% do viewport, no <body> já tinha definido bgcolor="002856". Então setei uma cor no css tb... 
background-color: #005826;
... e funcionou!!

os botões ao lado daquele que está sendo apontado pelo cursor do mouse, piscam!!

Sei lá, mudei a opção de cache que estava setado para "atualizar a cada visita a página" e resolveu, só aquela barra de baixo do IE fica flickando "concluído"... Putz! O cursor parou de funcionar pra ambos IE e FF agora... :(
cursor: pointer;

"Melhor visualizado em Mozilla FireFox"

Fala aí... Ah se eu fosse gerente de TI viu... faria questão de desisntalar esse cara de todas as máquinas... Putz, minha modesta opinião pessoal; FireFox é superior tanto nos aspectos de como trata as regras de uso de CSS quanto para a navegação em si mesmo, rápido, tem as tabs... (o IE 7 tb tem... ), a busca (Ctrl+F) é fantástica, sei lá... Muito obrigado pela força pessoal!

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

Putz! O cursor parou de funcionar pra ambos IE e FF agora...

Agora funciona... sei lá, preciso me benzer!

Compartilhar este post

Link para o post
Compartilhar em outros sites

kino!    0

kino!
Postado

E comé que ficou sua versão final?

Não tenho como publicar o baguio, mas o código ficou assim... O css:
button.botao, .botao_normal {		border: 0;	margin: 0;	padding: 0;		background-color: #005826;						  	background-image: url("botao.gif"); 		background-repeat: no-repeat;					color: #FFF;									   	cursor: pointer;							   	font-family: Arial, Helvetica, sans-serif;   		font-size: 11px;								   		font-style: normal; 	font-weight: bold;							   	height: 25px;											text-align: center;							   	width: 91px;									   button.botao:hover, .botao_hover {		border: 0;	margin: 0;	padding: 0;		background-color: #005826;	background-image: url("botao_hover.gif"); 			  	background-repeat: no-repeat;								  		color: #FFF;												   		cursor: pointer;											 	font-family: Arial, Helvetica, sans-serif;					 	font-size: 11px;													font-style: normal;	  font-weight: bold;	height: 25px;	text-align: center;	width: 91px;}
A página:
<html>  <head>		<link href="meucss.css" rel="stylesheet" type="text/css">	     <script src="meujs.js"></script>	<script>		function inicia_botoes()	{		var botoes,i;		botoes = document.getElementsByTagName("button");	/*button*/ 		for(i=0;i<botoes.length;i++){			if(botoes[i].className=="botao"){				botoes[i].onmouseover=function(){this.className="botao_hover";}				botoes[i].onmouseout=function(){this.className="botao_normal";}			}			else if(botoes[i].className=="botao_maior"){				botoes[i].onmouseover=function(){this.className="botao_maior_hover";}				botoes[i].onmouseout=function(){this.className="botao_maior_normal";}			}					}	}	</script>    </head>  <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="#005826" onload="inicia_botoes()">	<table height="100%" border="0" cellspacing="0" cellpadding="0" marginheight=0 marginwidth=0 align="right">	  <tr align="center" valign="center">						  	<td>		  <button class="botao" onclick="javascript:fNovo()">Novo</button>		 		</td> 	<td>		  <button class="botao" onclick="javascript:fAvisoExclusao(window.parent.frames['frameCentro'].document.forms[0], 'chkExclui')">Excluir</button>		 	</td>	<td>		  <button class="botao" onclick="javascript:fVoltarPrincipal()">Voltar</button>		 	</td>	  </tr>	</table>  </body></html>
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito