CSS :hover and transform

Question

I have this situation:

Html:

css:

.button { 
   position:absolute; 
   lef         


        

Answer 1

Yes just keep the value which you do not want to change same on hover of that element.

Answer 2

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:

<button class="button">test</button>
<button class="button">test</button>
<button class="button">test</button>
<button class="button">test</button>

Answer 3

Yes, just combine the two transforms, like this:

transform: translateY(50px) scale(1.2);

FIDDLE

.button {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(50px);
  border: 1px solid green;
}
.button:hover {
  transform: translateY(50px) scale(1.2);
}

<button class="button">hello</button>