Using the translate function

Let's go one step further and also use the translate function. This will be added to the same line, or declaration, as the transform: scale code that we just wrote. The translate function can move the element to the left, right, top, or bottom. As you can see in the following line of code, the first value is for left and right movements. But we're not going to move it to left or right, so we'll use 0. The second value is for the top and bottom movement. I'm actually going to push it up by -5px. If I were to use a positive value, that would push it down:

transform: scale(1.1,1.1) translate(0, -5px);

Now when we refresh and hover over a button, we will see it does nudge up slightly, five pixels to be exact:

Notice ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.