Yet Another hover effect (2)

meniu5.gif

In order to make this type of hover effect, we will use the structure from our previous example, yet we will make some adjustments.

1.png

As you can see, I’ve changed places between the two <div> elements which slide from both sides of the button, in order to build that “open” effect much easier.

As far as the CSS part goes, I’ve went ahead and copied everything I need and I’ve made some small changes, like colors, the border in between the buttons and the shadow set to the unordered list; beside these, I’ve hidden the following declaration – overflow: hidden; – in order to better see the sliding elements, when we’ll edit them.

2.png

meniu6.gif

So far, this is the result. The next step consists in editing the two sliding elements, by giving them width and height, setting the position and their trajectory on mouse-over.

3.png

meniu7.gif

Now we’ll just take the overflow: hidden; declaration out of the comment set inside the unordered list so that our sliding elements won’t show beyond the lists’ border, and now we just need to change the colors of the elements making the entire button, as follows:

.buton{background: #67cc67;}
.slide-tl, .slide-tr{background: #486348;}

meniu5
The final result
Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s