Css - hover effect on a button is not working

Question

I am doing this inside my HTML file where I want a hover effect button. But, this is not working.

.carousel-caption button {
  padding: 20px 100px;
  background-color: Transparent;
  border: 1px solid #ff084e;
  float: right;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.carousel-caption button :hover {
  background-color: #4CAF50;
  /* Green */
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="https://picsum.photos/50/10" alt="test" class="img-responsive" style="width: 100%">
      <div class="carousel-caption">
        <button>Learn More</button>
      </div>
    </div>
  </div>
</div>

where I am doing wrong. My hover effect is not working.

Answer 1

Remove space between the button and :hover

Replace button :hover with button:hover.

.carousel-caption button {
  padding: 20px 100px;
  background-color: Transparent;
  border: 1px solid #ff084e;
  float: right;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.carousel-caption button:hover {
  background-color: #4CAF50;
  /* Green */
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="https://picsum.photos/50/10" alt="test" class="img-responsive" style="width: 100%">
      <div class="carousel-caption">
        <button>Learn More</button>
      </div>
    </div>
  </div>
</div>