CSS Button Hover Transition: Generic starter template for a simple hover / slide effect

css

.button {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    position: relative;
    text-align: center;
    border: 1px solid #ddd;
    padding: 0 15px;
}

.label {
    display: block;
    height: 100%;
    position: relative;
    top: 0%;
    transition: top 0.35s;
    width: 100%;
}

.button:hover .label {
    top: -100%;
}

html

<div class="button">
    <span class="label">Button Label</span>
    <span class="label">Button Label</span>
</div>