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

    CSS Howto..

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to target a child element of a multiple parent selector in SASS [duplicate]

    How can I have an image float next to a centered div?

    how to use linked animated css?

    How can I hide a DIV without using CSS?

    CSS - How to centre a link button

    How to change css style for only one image in specific page in wordpress?

    How to add incremental values to a css attribute with Jquery

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How to I have a within a
  • align to the right side of the
  • how to add css for div tag

    How to create a full width background image with a variable height depending on content?

    How to trigger css3 rotate effect by clicking?

    How to get a navbar to display text depending on button clicked

    How to force text wrapping with floated elements

    How do I select immediate children in jQuery [closed]

    How to make arrows on both sides of a box using css [duplicate]

    How to make a toggleable navbar in pure CSS?

    How can I inline the label with the input horizontally and the inputs vertically

    How to make an oblique oval in CSS?

    how to keep the css style after inserting a row to table by jquery

    how to disable width: 100%; and box-sizing: border-box;

    Keep mobile browser from showing elements outside body?

    How does a document reference an SCSS file?

    Android How to load Custom CSS on external HTML page in WebView

    Show Item when Hover Over Parent

    How To Apply jQuery CSS Selector

    Images not showing up in correct spot [closed]