CSS :hover and transform

Question

I have this situation:

Html:

css:

.button { 
   position:absolute; 
   lef         


        

Answer 1

Try like this: Demo

CSS:

 .button {
    width:auto;
    background-color:red;
    color:#fff;
    transform: translateY(50px);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.button:hover {
    background-color:blue;
    color:#fff;
    -webkit-transform: translateY(50px) scale(1.2);
    -moz-transform: translateY(50px) scale(1.2);
    -o-transform: translateY(50px) scale(1.2);
    -ms-transform: translateY(50px) scale(1.2);
    transform: translateY(50px) scale(1.2);
}

HTML:

test
test
test
test