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 apply CSS changes for the last

    element of the 3rd div class span8

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to debug a website template which is very slow (client side)?

    Bootstrap shows black rectangles when printing focused input elements

    How can I add value to textbox, instead of setting value

    How to use grunt sass to compile and compress scss to css?

    HTML/CSS: how to put all
  • in
      on the same line and centered [duplicate]
  • Dropdown not showing elements Bootstrap 3

    How to make vertical text change into horizontal text in css?

    How to use css selector with class prefix by dojo?

    How to wrap text in table cell without wrapping child elements

    How to implement small text list search functionality using CSS attribute selectors

    How to create a zig zag banner with css

    How to speed up a slow loading PHP page that is processing several large arrays?

    How to apply CSS styling to elements created by jquery's append()?

    How is does Jquery display a tooltip on this span element?

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    How do I minify CSS and Javascript? [duplicate]

    How to modify multiple CSS attributes of an element?

    How do a Add scroll bar with fixed header

    How to add a border around a canvas?

    How do you get a Radio Button to change text color in html with jquery?

    How to bump up text?

    how to center background image in window resize

    How to get chevron to align to center of link tab

    how do i suppose to make the 4 box be responsive?

    HTML/CSS How do I get 2 completely independant scrollbars?

    How to add hover effect to menu using jQuery

    How to partly color the border with css [closed]