how to add hover effect to button using css

Tags: html,css

Problem :

i'm trying to add hover effect to my menu.This is my html

<div class="nav-top-menu nav-top">
 <span class="menu-icons">
   <button class="menu-button hoverEfect">
     <i class="fa fa-cog fa-2x"></i>
     <span class="menu-icons-text" id="userName">Enhanzer(pvt)ltd</span>
    </button>
  </span>
</div>

i just want to change color when mouse over.This is css that i tried

.nav-top-menu .hoverEfect button:hover 
{
  color: #65b4d7;
}

can anyone help me to do this. i don't want to use javascript or jquery

---

Solution :

Change this:

.nav-top-menu .hoverEfect button:hover 

To this:

.nav-top-menu .hoverEfect:hover 

As .hoverEffect is itself a button

You may also use:

.nav-top-menu button.hoverEfect:hover 
{
  color: #65b4d7;
}