Duda con botón (HTML y CSS)

[JonaLamper]

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:



Código en HTML:

Código (html4strict) [Seleccionar] Expandir

   <a href="/inicio">
       <button class="salir pacifico"><span>Hola, <%=usuario%></span></button>
   </a>

Código en CSS:

Código (css) [Seleccionar] Expandir

.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  

[[u]nsigned]

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:

Código (javascript) [Seleccionar] Expandir

$('.salir').on('click', function(e){
   document.location = 'http://www.google.com';
});

[ivancea96]

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.

[JonaLamper]

No me dejan usar jQuery sólo HTML, CSS y JS

[maxam]

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.