Use 2D transforms to give elements placement changing effects. They don't change the element placement in the document flow like margin or border and they are supported by all the major browsers.

Example

Markup

<div class="container">
    <div class="hover-nudge">
        Click Me!
    </div>
    <div class="hover-nudge">
        Click Me!
    </div>
    <div class="hover-nudge">
        Click Me!
    </div>
    <div class="hover-nudge">
        Click Me!
    </div>
</div>

.hover-nudge {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: transform .125s;
}
.hover-nudge:hover {
    cursor: pointer;
    transform: translate(0, -3px);
}
.hover-nudge:active {
    transform: translate(0, 1px);
}