CSS: transition + scale in non-absolute elements - css

Question

I have a problem in this website:
http://www.bacubacu.com/paybus/
if you hover any of those 3 big round buttons at the bottom the animations works just great (they are absolute).
if you hover where it says "ver historial" the animation jumps to te beginning and stops, even if the "tap" class is still active. I've found out that it is related to the element positioning (being non-absolute).
I have no idea why this is happening, any of you can help me to solve it?
this is the CSS code:
.touch{
transition: transform 0.15s ease-out;
-webkit-transition: -webkit-transform 0.15s ease-out;
}
.touch.tap{
-webkit-transform: scale3D(0.9,0.9,0.9);
}

Answer 1

Ok, I found the answer myself. it gets fixed when adding "display:inline-block" to the anchor element. I didn't know where the problem was, sorry if my question was not too specific (my english doesn't help either hehe).
https://jsfiddle.net/15ryknk5/10/
display:inline-block;

Answer 2

I think you mean click instead of hovering. To hover is to place the cursor over the element. That is a different event than clicking. Also I think your css is wrong. I don't know if you can pass transform as a parameter of a transition. FInally I saw you Jquery and it seems to run on click. Try this code
HTML
<div id="tap_buttom" class="touch">
<p>This is a button</p>
</div>
CSS
.touch{
border-radius: 10px;
background: #ececec;
padding: 10px;
width: 150px;
text-align: center;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
/* Line added by Alvaro Prieto */
display: inline-block
}
.touch.tap
{
-webkit-transform: scale3D(0.9,0.9,0.9);
-moz-transform: scale3D(0.9,0.9,0.9);
-o-transform: scale3D(0.9,0.9,0.9);
-ms-transform: scale3D(0.9,0.9,0.9);
transform: scale3D(0.9,0.9,0.9);
}
jQuery
$(document).ready(function(){
$(this).mousedown(function(){
$("#tap_buttom").addClass("tap")
})// end click function
$(this).mouseup(function(){
$("#tap_buttom").removeClass("tap")
})// end click function
})// end document.ready
You can run this code here https://fiddle.jshell.net/15ryknk5/. I hope this works