Color on hover in css-CodePudding

I want the color change when I hover the button (button only) but it did't work. Here is what I've tried so far;

The original text
.third {
     color: rgb(41 3 0);
     text-shadow: inherit;
     transition: 1.5s;
     }
div:hover .button:hover .third {
    color: rgb(255, 0, 0);
     }
button:hover third {
    color: rgb(255, 0, 0);
}

CodePudding user response：

You don't need div:hover .button:hover:

div {
  background: #A2CCB6;
}
div button {
  background: #222;
  color: #f90;
  padding: 1rem 2rem;
  border: none;
}
div:hover button {
  background: #f90;
  color: #fff;
}
div button:hover {
  background: #fff;
  color: #222;
}

<div> 
  <button>Hallo</button> 
</div>

CodePudding user response：

If You are using the selector class then the selector should be .button if you are styling by tag then you don't need to add .button just use button

.third {
 color: red;
 text-shadow: inherit;
 transition: 1.5s;
 }
 button{
 background-color:black;
 padding:6px 10px;
 }
 button:hover {
 background-color:blue;
 }
button:hover .third {
color: #fff;
 }

<button><span >Send</span></button>