When I hover over a button, it does not highlight

Tobin Jordan 0
Viewed 43

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>

css html
2 Answers

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.

skyCode0

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