Yo lo haría de la siguiente manera:
Código HTML:
<html>
<head>
<style>
.upDownButton
{
width: 200px;
height:30px;
line-height:30px;
background-color:red;
display:block;
position:relative;
text-align:center;
text-decoration:none;
color:white;
overflow:hidden;
}
.upDownButton .text
{
width: 100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.upDownButton .background1, .upDownButton .background2
{
width: 100%;
height:100%;
position:relative;
background-color:blue;
-webkit-transition: top .25s linear;
}
.upDownButton .background2
{
background-color:green;
}
.upDownButton:hover .background1, .upDownButton:hover .background2
{
top:-30px;
-webkit-transition: top .25s linear;
}
</style>
</head>
<body>
<a class="upDownButton" href="">
<div class="background1"></div>
<div class="background2"></div>
<div class="text">Enlace</div>
</a>
</body>
</html> Y para navegadores viejos que no acepten la propiedad transition deberías sustituirla por jQuery o si lo prefieres hacer tú mismo un pequeño código con JS que vaya aumentando progresivamente la propiedad top.
Espero que te sirva!
NOTA: Funciona en navegadores webkit. Si lo necesitas para Opera, Firefox... añade transitions con los prefijos correspondientes.