When I hover over a button, it does not highlight-CodePudding

I am trying to have a button highlight when I hover over it, but it doesn't seem to be working. Am I doing something wrong? It seems to work on the dropdown menu I made, but not the buttons. I am new to html and css and I couldn't seem to find an answer anywhere online.

/*a button that when clicked on, sends to a page about me*/
  .SiteMakerButton {
    padding : 16px;
    width: 15%%;
    text-align : left;
    background-color: rgb(37, 217, 184);
    border: none;
    color: white;
    font-weight: bold;
    font-size: 15px;
  }



  /*a button that takes you to the main paige*/
  .HomeButton {
    padding : 16px;
    width: 15%%;
    text-align: left;
    background-color: rgb(37, 217, 184);
    border: none;
    color: white;
    font-weight: bold;
    font-size: 15px;
    transition-duration: 0.2s;
  }
  

  .HomeButton :hover {background-color: white; color: black;}

  .SiteMakerButton :hover {background-color: white; color: black;}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TESTING</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class = TopBannerDiv>
    <button class = "HomeButton">Home</button>
    <button class = "SiteMakerButton">About The Site Maker</button>
    <div class = "dropdown">
      <button class = "dropbtn">Units</button>
      <div class = "dropdown-content">
        <a href="#">Unit 1</a>
        <a href="#">Unit 2</a>
        <a href="#">Unit 3</a>
        <a href="#">Unit 4</a>
        <a href="#">Unit 5</a>
        <a href="#">Unit 6</a>
        <a href="#">Unit 7</a>
      </div>
    </div>
  </div>
  <script src="script.js"></script>

  <script src="https://replit.com/public/js/replit-badge.js" 
theme="blue" defer></script> 
</body>

</html>

CodePudding user response：

Try writing

.HomeButton:hover {background-color: white; color: black;}

like this, there is a difference in CSS between having spaces and not.

Also, use inspect element to make sure that there is nothing that is overwriting your style.

CodePudding user response：

Reduce the space between the class and the pesudo class (means hover)

.HomeButton:hover {
    background-color: white; 
    color: black;
}

.SiteMakerButton:hover {
    background-color: white; 
    color: black;
}