Change font color upon hover-CodePudding

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 >
   <a href="#"> <button >HTML</button></a>
<a href="#"> <button >C/C  </button></a>
<a href="#"> <button >JavaScript</button></a>
<a href="#"> <button >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;
}

CodePudding user response：

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 >
  <a href="#"> <button >HTML</button></a>
  <a href="#"> <button >C/C  </button></a>
  <a href="#"> <button >JavaScript</button></a>
  <a href="#"> <button >CSS</button></a>
</div>

CodePudding user response：

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

CodePudding user response：

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 >enter code here
  <a href="#"><button >HTML</button></a>
  <a href="#"><button >C/C  </button></a>
  <a href="#"><button >JavaScript</button></a>
  <a href="#"><button >CSS</button></a>
</div>