SOURCE

<div class="box">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

<button class="slickButton2">hangge.com</button>

.box{
    height: 300px;
    width: 300px;
    background: #ccc;
    position: relative;
}
.c1{
    width: 100%;
}
.c2{
    width: 100%;
    height: 100%;
    background: red;
    transform:translateY(0px);
    transition: transform .4s;
}
.box:hover .c2{
    transform:translateY(-300px);
}