domingo, 11 de marzo de 2018

Login Sencillo y Elegante HTML,JS,CSS



Que tal colegas el dia de hoy les compartimos el siguiente login.
y el codigo

Codigo HTML :


<form class="login">
 
  <fieldset>
   
      <legend class="legend">Cultura Informatica</legend>
   
    <div class="input">
        <input type="email" placeholder="Email" required />
      <span><i class="fa fa-envelope-o"></i></span>
    </div>
   
    <div class="input">
        <input type="password" placeholder="Password" required />
      <span><i class="fa fa-lock"></i></span>
    </div>
   
    <button type="submit" class="submit"><i class="fa fa-long-arrow-right"></i></button>
   
  </fieldset>
 
  <div class="feedback">
      login Exitoso, Bienvenido a Cultura <br />
    Redirigiedo
  </div>
 
</form>



Codigo JS

$( ".input" ).focusin(function() {
  $( this ).find( "span" ).animate({"opacity":"0"}, 200);
});

$( ".input" ).focusout(function() {
  $( this ).find( "span" ).animate({"opacity":"1"}, 300);
});

$(".login").submit(function(){
  $(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
  $(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
  $(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
  $("input").css({"border-color":"#2ecc71"});
  return false;
});


Descarga el codigo :



descarga

Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts