Muy buenas,
Tengo un botón que aparece el nombre del usuario "Hola, root" (por ejemplo). Al hacer hover, digamos que se voltea 90 grados y aparece un "Salir" en el que supuestamente al hacer click te deslogeas de la web. Esa transición dura aproximadamente 1 segundo, el problema es que el href que tiene el botón sólo actúa cuando está en "Hola, root" y, cuando se voltea 90 grados y aparece "Salir", ya no tiene efecto el href (o sea, al voltearse es como si pasase a ser otro botón distinto que no tiene asignado ningún href).
Captura de la transición del botón:
(http://thumbs.subefotos.com/362f74da47347b962e733bb83ebd118do.jpg) (http://subefotos.com/ver/?362f74da47347b962e733bb83ebd118do.jpg)
Código en HTML:
<a href="/inicio">
<button class="salir pacifico"><span>Hola, <%=usuario%></span></button>
</a>
Código en CSS:
.salir {
border-top: 0px;
border-bottom: 0px;
border-right: 3px #0385c3 solid;
border-left: 3px #0385c3 solid;
cursor: pointer;
display: block;
/* border: 1px rgba(255, 255, 255, 0) solid; */
background: rgba(58, 121, 153, 0);
color: #2d2d2d;
margin-bottom: auto;
margin-top: 35px;
margin-right: 10px;
/* padding: 10px; */
font-size: 18px;
width: 160px;
float: right;
/* box-sizing: border-box; */
transition: all 1s ease;
transform-style: preserve-3d;
}
.salir:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}
.salir:after {
top: -120%;
left: -3px;
width: 100%;
position: absolute;
background: white;
content: 'Salir';
transform-origin: left bottom;
transform: rotateX(90deg);
font-size: 18px;
border-right: 3px #0385c3 solid;
border-left: 3px #0385c3 solid;
color: white;
background: rgba(58, 121, 153, 0);
}
¿Alguien sabe qué podría hacer para que cuando aparezca "Salir" me funcione el href del botón?
Muchísimas gracias ;D
Probaste con jQuery, no se si ya lo usas en tu proyecto, deberias capturar el evento clic de la clase 'salir' y mandarlo a donde queres con JS:
$('.salir').on('click', function(e){
document.location = 'http://www.google.com';
});
Si le pones la clase "salir" al <a> en vez de al <button>, ¿cnsigues el efecto que buscas? Tal vez sea algo así lo que buscas, no estoy seguro.
Si tal, puedes separar la clase salir en 2: 1 con las animaciones y otro con el estilo, y la del estilo ponérsela al button.
No me dejan usar jQuery :( sólo HTML, CSS y JS
Técnicamente jQuery es JS
He estado toquiteando un poco en un jsfiddle
https://jsfiddle.net/khakesqj/
y el problema lo tienes en que el elemento que aparece nuevo con el :after esta en una posición absolute y con un desplazamiento en negativo, lo que lo sitúa fuera del elemento clickable, por lo que nunca va a ejecutar el evento click sobre el elemento principal.
Mod: No hacer doble post.