Change background color for div [closed]

The code that I currently have is this:

.button2 {
  margin-left: 10px;
  background-color: lightgreen;
  width: 180px;
  height:100px;
  padding: 50px,60px;
  color: rgba(20, 15, 30, 0.8);
  text-transform: uppercase;
  border: 1px solid green ;
  font-weight: bold;
  font-size: 20px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -border-radius: 3px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
  -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -webkit-transition: background 0.2s ease-out;

  .button2:hover {
    background-color:#FF0000;
  }

The problem, however, is that whenever I hover my mouse over the div, the background color of the box does not change to red.

How can I make it so that whenever I hover over divs with class button2 it will change to the background color red? Is there a problem with the formatting?

My current HTML is:

<html>
<div class=button2></div>
</html>

solution

Simple syntax error - you forgot to close .button2 {}

jsFiddle example - it works now

Updated CSS

.button2 {
  margin-left: 10px;
  background-color: lightgreen;
  width: 180px;
  height: 100px;
  padding: 50px,60px;
  color: rgba(20, 15, 30, 0.8);
  text-transform: uppercase;
  border: 1px solid green;
  font-weight: bold;
  font-size: 20px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -border-radius: 3px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9);
  -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
  -webkit-transition: background 0.2s ease-out;
}


.button2:hover {
  background-color: #FF0000;
}

As a side note, it’s always helpful to view these errors in the F12 dev tool.