如何上升和下降按钮?

时间:2012-09-26 11:14:47

标签: css layout button navigation navigationcontroller

在网站下方网站的导航布局中,当悬停在按钮上时,它会上升,当鼠标被拿走时它会下沉,如何以css或其他方式进行操作?

www.bigfishgames.com/

1 个答案:

答案 0 :(得分:0)

您可以使用纯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-bottomheight如何更改,以表示div向上扩展'的错觉。