向上和向下按钮是如何制作的？

Question

在下面网站的导航布局中，当鼠标悬停在按钮上时，它会升起，而当鼠标移走时，它会下沉，如何在css或其他方式下做到这一点？

Www.bigfish games.com/

Answer 1

你可以用普通的CSS做到这一点：

<!DOCTYPE html>
<html>
<head>
<style>
div { border-radius: 4px; width: 100px; height: 20px; background: green; position: absolute; top: 50px; left: 50px; text-align: center; padding: 10px 0px; }
div:hover { top: 40px; padding-bottom: 20px; }
</style>
</head>
<body>
<div>Howdy</div>
</body>
</html>

请注意padding-bottom和height是如何改变的，以给人一种div正在“向上”扩展的错觉。