Changing button text on hover

Question

I'm trying to change the text of the button when you hover on it, I found a solution but for some reason it won't work.

What I want to happen is when I hover on it it will turn to green and change the text to Completed!.

Currently the button changes color when I hover on it but the text wont change.

Here's my css:

And here's the html for the button:

<button class="button" type="submit" name="completed" value="">New Request</button>

Answer 1

You could do this using a psuedo element.

.button {
  width: 150px; /* set a width so it doesnt change upon hover */
   border: 0px solid #004B84;
   background: red;
   padding: 3px 21px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   color: #ffffff;
   font-size: 12px;
   font-family: Questrial;
   text-decoration: none;
   vertical-align: middle;
   letter-spacing: 2px;
}

.button:hover span {
  display:none
}

.button:hover:before {
  content:"Completed!";
}

.button:hover {
  background-color: green;
}

<button class="button">
 <span>New request</span>
</button>