how the rises up and down button is made?


Tags: css,layout,button,navigation,navigationcontroller

Problem :

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/



Solution :

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'.


    CSS Howto..

    How to represent dual-cell format in CSS?

    How to rotate + flip element with CSS

    How to give a css code for combined classes in HTML [duplicate]

    How do I join my list and div using css?

    Conditional css showing limit items

    How to make smooth animation in css?

    How to add a css to a view in the Controler?

    How to display text in the middle?

    CSS/HTML menu not showing correctly

    How to disable fixed header on Mobile with CSS

    How to use CSS to replace or change text? [duplicate]

    How to apply a drop shadow on a triangle in CSS?

    How to reverse a CSS animation on unchecked state?

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    Yahoo.widget.Editor - How to configure font size of text

    How prevent Conflict between two $(this) in jquery?

    How to customize devise login and signup forms created using the simple_form gem?

    How do I create a region/zone map for the web? [closed]

    How to re-animate CSS3 animations on class change

    How do I get a computed style?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How can I use Rspec to check for the absence of certain CSS classes?

    How does style elements such as “color” in CSS apply to elements like img?

    CSS: how to make a list item containing a form “submittable”?

    How to make a 3D banner overlay (??) with CSS

    How can I workaround this CSS anomaly?

    how to get a css slide transition using bootstrap modal and angular ui?

    How to change the style/css of a tooltip?

    How to prevent exceeding the parent's boundary?

    How to split page into 4 equal parts?