Resulta que tengo este login simple, manejo Overhang.js para mostrar un mensaje en caso de que las credenciales sean incorrectas. Con este mismo plugin podría mostrar un mensaje cuando el acceso es correcto, pero entre todas sus opciones ninguna me convence del todo (temas UI/UX).
Para este caso, cuando sea correcto el acceso, quisiera manejar por ejemplo, un cambio en el mensaje del input
tipo submit
que pase de "Ingresar" a "Ingresando".
O podría ser también un efecto fade como el de los modales de Bootstrap que oscurece la pantalla.
$(document).ready(function() {
$('.background-image').on('webkitAnimationEnd', function(e) {
$(this).addClass('visible');
});
});
/* ---------- GENERAL ---------- */
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100%;
}
body {
background-color: #ebebeb;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
margin: 0;
min-height: 100%;
}
input {
background-image: none;
border: none;
font: inherit;
margin: 0;
padding: 0;
transition: all .3s;
}
/* ---------- ALIGN ---------- */
.align {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---------- GRID ---------- */
.grid {
margin-left: auto;
margin-right: auto;
max-width: 500px;
max-height: 500px;
width: 80%;
}
/* ---------- LOGIN ---------- */
#login h2 {
background: #0088a3;
border-radius: 15px 15px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
height: 100%;
}
#login h2 span[class*="fontawesome-"] {
margin-right: 14px;
}
#login fieldset {
background: #fff;
border-radius: 0 0 10px 10px;
padding: 20px 26px;
}
#login fieldset p {
color: #777;
margin-bottom: 14px;
}
#login fieldset p:last-child {
margin-bottom: 0;
}
#login fieldset input {
border-radius: 3px;
}
#login fieldset input[type="text"],
#login fieldset input[type="password"] {
background: #eee;
color: #777;
padding: 4px 10px;
width: 100%;
}
#login fieldset input[type="submit"] {
background: #0088a3;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#login fieldset input[type="submit"]:hover {
background: #0088a3;
border-radius: 15px 2px;
cursor: pointer;
}
#login fieldset input[type="submit"]:active {
background: #0088a3;
border-radius: 2px 15px;
cursor: wait;
}
@import "compass/css3";
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background-image {
background: url('../images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
}
.background-image.visible {
opacity: 1;
}
<body class="align">
<div class="align background-image">
<div class="grid">
<div id="login">
<h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>
<form id="loginform" action="validarcode.php" method="POST" autocomplete="off">
<fieldset>
<p><label for="usuario">Usuario</label></p>
<p><input type="text" name="txtusuario" id="usuario" autofocus></p>
<p><label for="password">Contraseña</label></p>
<p><input type="password" name="txtpassword" id="password"></p>
<br><br>
<p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>
<br>
<div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
<h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>
</fieldset>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="assets/overhang.js"></script>
<script src="assets/app.js"></script>
</body>
Resumiendo, sé que con JS puedo mostrar este alert
al presionar el submit
, pero en su lugar cómo podría llamar por ejemplo una animación en CSS?
function exito() {
alert("Ingresando...");
return true;
}
<input class="with-arrow" type="submit" name="Enviar" value="Ingresar" onclick="return exito();">