How can I get text within a button to change while the button is highlighted?

Problem

I want to be able to have the text within the button change when the button is hovered over. The text only changes color when it is hovered over instead of the whole button. The button background should be #FFFFFF and the text color should be #3A75B0

HTML:

<div class="getStartedButton">
        <a href ="/signup">
            <button class="getStarted">
                Get Started
            </button>
        </a>
</div>

CSS:

.getStarted {
    display: table;
    margin: 0 auto !important;
    height: 170px;
    width: 300px;
    background: transparent;
    text-decoration: none;
    border-style: solid;
    border-color: #FFFFFF;
    font-family: Helvetica;
    text-align: center;
    color: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 60px;
    padding: 20px 10px 50px 10px;
    margin-bottom: 50px;
}

.getStarted a {
    text-decoration: none;
    font-family: Helvetica;
    text-align: center;
    color: #FFFFFF;
    font-size: 60px;
    margin-bottom: 50px;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}


.getStartedButton:hover {
    color: #3A75B0;
    background-color: #FFFFFF;
}

.getStartedButton {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

.getStartedButton a:hover {
    color: #3A75B0;
}

.getStarted:hover {
    color: #3A75B0;
}

.getStartedButton.getStarted:hover {
   color: #3A75B0;
}
Problem courtesy of: TimmyO18

Solution

This is not possible in pure CSS. Try this JS approach:

function changeText(button){
  
  button.innerHTML = "Text Changed!";
  
  }
<div class="getStartedButton">
        <a href ="/signup">
            <button onmouseover="changeText(this)" class="getStarted">
                Get Started
            </button>
        </a>
</div>

Hope that works for you!

Solution courtesy of: God is good

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.