Search code examples
htmlcsspseudo-class

CSS pseudo classes :hover and :active not working

So I wanted to try and make a game but I ran into a CSS problem right away. As you can tell by the question, the pseudo-classes that I am trying to use are not working. If you want to look at my code it's right here.

Fiddle

CSS

#button {
    width: 200px;
    height: 100px;
    border-radius: 20px;
    background-color: orange;
    cursor: pointer;
    margin: auto;
    margin-top: 250px;
    border: 1px solid black;
    text-align: center;
    font-size: 1.3em;
    color: blue;
};

#button:hover {
    border: 3px solid black;
};

#button:active {
    border: 2px solid black;
};

HTML

<body>
    <div id="button">
        <p>
            Click here to get some money!
        </p>
    </div>
</body>

Basically all I'm trying to do is expand and contract the border when the user clicks on the div so that it looks more like they are pressing an actual button.

Solution

  • Remove unnecessary semicolons ; 

    #button {
  width: 200px;
  height: 100px;
  border-radius: 20px;
  background-color: orange;
  cursor: pointer;
  margin: auto;
  margin-top: 250px;
  border: 1px solid black;
  text-align: center;
  font-size: 1.3em;
  color: blue;
}

#button:hover {
  border: 3px solid black;
}

#button:active {
  border: 2px solid black;
}
    <div id="button">
  <p>
    Click here to get some money!
  </p>
</div>