Yet Another hover effect (2)


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


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.



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.



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;}

The final result

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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s