Ir para conteúdo

POWERED BY:

Arquivado

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

Tsubaru

[Resolvido] Botão sem cara de botão

Recommended Posts

Vejam esse site: http://erikmazzone.com/

 

No stay in touch tem um form com um botão register que tem um layout diferente.

 

Salvei o site pra ver o código, mas não achei nada.

 

Na página
	<div id="newsletter">
	
		<form name="registerform" id="registerform" action="/wp-login.php?action=register" method="post">
		
		<label>Name:<br>
		<input name="user_login" id="user_login" class="input" value="" size="20" tabindex="10" type="text"></label><br>

		<label>E-mail:<br>
		<input name="user_email" id="user_email" class="input" value="" size="20" tabindex="20" type="text"></label>
	
		<br>
		
		<input name="submit" id="submit" value="Register »" tabindex="100" type="submit">
		</form>
						
	</div><!-- /newsletter -->

No .css
#newsletter { behavior: url(/~mazzone/iepngfix.htc); float:left; width:310px; height: 235px; margin-top:20px; padding:0px; background:url(images/stay-in-touch.png) no-repeat bottom left; }
#newsletter form { padding: 65px 0 50px 50px;}
#newsletter input { padding: 2px; margin-top: 5px; border: 1px solid #ccc; }

Esse tabindex não mudou em nada meus botões.

 

Alguém sabe como fazer o efeito desse site, ou como fazer botões personalizados, usando imagens?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara não consegui entender o codigo dela ainda acredito que o efeito esteja dentro do arquivo de codigo css da pagina, mas acredito que ela tenha utilizado o efeito de troca de imagem que pode ser feito com css:

 

http://www.maujor.com/tutorial/menurollimg.php

 

Tambem pode ser feito com javascript e até feito fatiando e aplicando efeitos diretamente no layout dentro do Fireworks.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não consegui descobrir como o cara fez naquele site, mas acabei resolvendo o meu problema.

 

Criei um estilo para o botão e para as caixa de texto.

 

.form { 
	padding: 0;
	border-style: none;
	background-color: #CCCCCC;
	color: #000000;
}

Só jogar o class dentro da tag input. :)

 

PS: Uma pena que não dê pra alterar o título, senão colocaria resolvido nele. :/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa Noite!

Que bom que o problema foi resolvido... Melhor ainda que o Tsubaru disponibilizou a resolução. ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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