how the rises up and down button is made?

StackOverflow https://stackoverflow.com/questions/12600452

質問

In the website below website's layout in the navigation,when hovered on the buttons it rises up and when the mouse is taken away it sinks down,how to do it either in css or other ways ?

www.bigfishgames.com/

役に立ちましたか？

解決

You can do it with plain 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>

Note how both padding-bottom and height are changed to give the illusion that the div is expanding 'upwards'.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top