Tela de login com efeitos

Este código mostra uma tela de login com nome e senha com vários efeitos:
– Muda cor de fundo e borda do campo e da linha do campo onde passa o mouse;
– Seleciona automaticamente o campo onde o mouse está;
– Exibe uma descrição de cada campo ao passar o mouse.

Você somente precisa deixar todos os arquivos na mesma pasta (login.htm, login.css, login.js, user.jpg, key.jpg, aut.jpg).
O formulário envia os dados para a página logar.html, mas você pode mudar isso editando a linha “”;
Você pode mudar cores e outros parâmetros diretamente no arquivo login.css.

 
  

	

		
 
		  Digite sua identificação de usuário! 
		   
		  
		
		
 
		  Digite sua senha de acesso! 
		   
		  
		
		
 
		  Clique uma vez aqui para realizar 
		  sua autenticação!  
		
	
  





.geral {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #3333FF;
	text-decoration: none;
	background-color: #0000;
	text-align: justify;
	vertical-align: middle;
	word-spacing: normal;
	white-space: normal;
}
.formlogin {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FF0000;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
	width: 500px;
	height: 100px;
}
.dica {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: lighter;
	border: thin dashed #FF9900;
	height: auto;
	width: auto;
	display: none;
	position: absolute;
	top: 150px;
	left: 10px;
}
.margem {
	margin: 20px;
}
.cxtext {
	border: 1px solid #FF9900;
	background-color: #C0C0C0;
}


// JavaScript Document
function ativarcampo(div){
	div.style.backgroundColor="#FF9999";
	div.style.border="thin dotted #FF0000";
	var id_span=div.id+"_span";
	var obj_span=document.getElementById(id_span);
	obj_span.style.display="block";
	var id_field=div.id+"_field";
	var obj_field=document.getElementById(id_field);
	obj_field.style.backgroundColor="#FFFFCC";
}

function liberarcampo(div){
	div.style.backgroundColor="";
	div.style.border="";
	var id_span=div.id+"_span";
	var obj_span=document.getElementById(id_span);
	obj_span.style.display="none";
	var id_field=div.id+"_field";
	var obj_field=document.getElementById(id_field);
	obj_field.style.backgroundColor="#C0C0C0";
}

Arquivos para Download:

login.zip