html5 - Changing button color on hover -

Good day! I know this question has been asked many times. I saw some threads here but they did not look enough, so I decided to make a new thread. Long story short This is my second day to learn HTML5, CSS3 and Javascript. I am at the point where I want to make menus with shiny buttons

Here the following is the case: The buttons look as much as they look, but the color does not change when the mouse moves over them . I will post the entire source code. There are some comments to help in understanding the code better.

The entire source code:

   & Lt; Style & gt; UL {List style: None; Margin: 40px 0; } Li {Float: left; } / * This will style buttons / / buttonStyle {width: 60px; Height: 20px; -max-boundary-radius: 2px; -Vibit-boundary-radius: 2px; } / * It should change its color when it hovered * / a.buttonStyle: hover {background: # 383; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt ;! - Custom list created to store button - & gt; & Lt; Ul & gt; & Lt ;! - Just a few buttons look like this menu - & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; Li & gt; & Lt; Input type = "button" class = "button style" /> & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Body & gt; & Lt; / Html & gt;    
 
 
 Your hover style looks like this:  
  A.buttonStyle: Hover {background: # 383; }   
 So it is especially  & lt; A & gt;  tag is set to change your style  
  .buttonStyle: hover {background: # 383; }   
 So you can set the circle only to specific squares. Then it works.  
 Look at this for a demo.