'Change font color upon hover

basically, what I would like this code to do is whenever you hover over the button, the background will turn blue, and the text's color will turn white. I have tried:

.btn1:hover a{
  background:#fff;
}

but this did not work.

<div class="container">
   <a href="#"> <button class="btn btn1">HTML</button></a>
<a href="#"> <button class="btn btn1">C/C++</button></a>
<a href="#"> <button class="btn btn1">JavaScript</button></a>
<a href="#"> <button class="btn btn1">CSS</button></a></div>

.container{
  text-align:center;
  margin-top:200px;
}

.btn {
  border:1px solid #3498db;
  background:none;
  padding:10px 20px;
  font-size:20px;
  font-family: "Montserrat", sans-serif;
  cursor:pointer;
  margin:10px;
  transition:0.8s;
  position:relative;
  overflow:hidden;
}
.btn1 {
  color:#3498db;
}

.btn1:hover{
  background:#3498db;
}
htmlcsshover


Solution 1:[1]

You need to also set the text color to white on hover:

.container {
  text-align: center;
}

.btn {
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}

.btn1 {
  color: #3498db;
}

.btn1:hover {
  background: #3498db;
  color: #fff;
}
<div class="container">
  <a href="#"> <button class="btn btn1">HTML</button></a>
  <a href="#"> <button class="btn btn1">C/C++</button></a>
  <a href="#"> <button class="btn btn1">JavaScript</button></a>
  <a href="#"> <button class="btn btn1">CSS</button></a>
</div>

Solution 2:[2]

the small error you are doing is you are trying to change the color of which is outside of instead try changing the font of the button which is made so i think:

.btn1:hover{
  background-color:blue; //choose your blue color
  color: white; // this defin the font color
}

sorry if im wrong

Solution 3:[3]

You were just missing the color white in the last class for the hover effect with CSS:

.container{
  text-align:center;
  margin-top:200px;
}

.btn {
  border:1px solid #3498db;
  background:none;
  padding:10px 20px;
  font-size:20px;
  font-family: "Montserrat", sans-serif;
  cursor:pointer;
  margin:10px;
  transition:0.8s;
  position:relative;
  overflow:hidden;
}
.btn1 {
  color:#3498db;
}

.btn1:hover {
  background:#3498db;
  color: #fff
}
<div class="container">enter code here
  <a href="#"><button class="btn btn1">HTML</button></a>
  <a href="#"><button class="btn btn1">C/C++</button></a>
  <a href="#"><button class="btn btn1">JavaScript</button></a>
  <a href="#"><button class="btn btn1">CSS</button></a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zach Jensz
Solution 2 Abdelmoula Bilel
Solution 3 nestor

Related Questions