Show Text on Hover Button or Icon a Reveal Effect

In this tutorial, We are going to help you how you can show text on hover a button or icon with CSS. It’s a reveal effect which developed with CSS3 slideout animation.

Basically, I will build a list of impressive rocking rounded CSS menu which will be rolling out and display some text when hovering the link.

We will create a menu with little icons to rotate when hovering. Additionally, we will make the menu item expand and reveal some menu content, like links or a search box form, etc.

These rolling menus are less complicated than it looks. We used the only CSS3 to create them. You don’t need to add any JavaScript or jQuery so these will be lightweight.

Such reveal effect perfect to used to show more info to the user when mouse over the menu link. You can also use them to create an expandable animated search box because it gives you the same effect.

The list of icons or buttons will expand horizontally and close when to leave the mouse cursor from the menu item. To help us develop this menu, We’re also going to be using Font Awesome. It is an iconic font and CSS toolkit.

How to Show Text on Hover Button

The rolling navigation will not be created using the list, but div elements are given class .rolling for each menu item.

We will pack the menu items in the main div. Each item will have an icon menu, heading and a description. Here is HTML an example code:

    <div class="rolling">
    <figure class="ball"><i class="fa fa-bluetooth"></i></figure>
    <span>Let's Share</span>
    <li><a href="#">ON</a></li>
    <li><a href="#">OFF</a></li>
</div>

The CSS Style

Initial, we will set the width of div given class .rolling relatively small like 52px and set overflow hid but on hover, we will set long as much as we want.

We will also add transition ease-out so when it expands, it should animate nicely. If you want to add some cool easing effects, you can use CSS easing library in your project.

.cc-rockmenu .rolling {
  display: inline-block;
  cursor:pointer;
  width: 52px;
  height: 52px;
  text-align:left;
  overflow: hidden;
  border-radius: 26px;
  background: #b6a14c;
  transition: all 0.3s ease-out;
  white-space: nowrap;
}
.cc-rockmenu .rolling:hover {
  width: 312px;
}

Similar, we need to style rolling icon for static and hover. Let’s see the CSS

.cc-rockmenu .rolling .rolling_icon {
  float:left;
  z-index: 9;
  display: inline-block;
  width: 52px;
  background: #bbae79;
  height: 52px;
  border-radius: 26px;
  box-sizing: border-box;
  margin: 0 10px 0 0;
}
.cc-rockmenu .rolling .rolling_icon:hover .rolling {
  width: 312px;
}

The other elements we will style as follows:

.cc-rockmenu .rolling i.fa {
    font-size: 24px;
    padding: 15px;
}
.cc-rockmenu .rolling span {
    display: block;
    font-weight: bold;
    padding: 4px 0;
}
.cc-rockmenu .rolling li {
    display: inline-block;
    list-style: outside none none;
}
.cc-rockmenu .rolling li a {
    color: #6a5502;
    padding-right: 5px;
    text-decoration: none;
}
.cc-rockmenu .rolling li a:hover{
	color:#fff;	
}

.cc-rockmenu .rolling li a:before{
   content:"\00bb";
}

.cc-rockmenu .rolling p {
	margin:0;
}

.cc-rockmenu .rolling input[type="text"] {
	width: 175px;
    background: #bbae79 none repeat scroll 0 0;
    border: medium none;
    height: 35px;
    margin: 9px 0;
    padding: 10px;
	color:#fff;
}
.cc-rockmenu .rolling input[type="submit"] {
    background: #6a5502 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    padding: 9px;
}

I hope you enjoyed it! If you like, don’t forget to share and leave comments below.