how the rises up and down button is made?
https://stackoverflow.com/questions/12600452
-
03-07-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
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'.
لا تنتمي إلى StackOverflow
