Text Color Change on Hover Over Button

Text color change on hover over button

The CSS property color controls the text color in elements generically. In your case, to change the color on hover, use the :hover specifier;

input[type = "submit"]:hover {
    color: #FF0000;
    //you can add more styles to be applied on hover
}

Note that you can as well specify the color using the rgb(x, y, z) format. Here's a little demo to illustrate: little link. You can play around with the demo and view the source here: another little link.

I hope that helped!

CSS Hover Text Changing Color With Button

I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:

#signUpBox {
    width: 150px;
    height: 47px;
    border: solid 1px #000;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    color:#000;
    background:#fff;

}

#signUpBox:hover {
    background: #000;
    color:#fff;
}

HTML:

<div id="signUpBox">This is a test</div>

DEMO

Prevent text color to change when hover button

.btn-info1, .btn-info1:hover
{   text-decoration: none;
color: white; background-color: #004377; etc...}

just need :hover styling

Color of the text not changing when hovering over a button

apply style to button tag button:hover instead of .button:hover

button {
  background: none;
  border-radius: 5px;
  border: 1.5px solid #4ca37f;
  color: #4ca37f;
  padding: 1px 6px;
  cursor: pointer;
}

button:hover {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

<div class="button">
  <button type="button">Follow</button>
</div>

How to change hover color of text inside button

You need to add css in button hover, not an element hover

.subscription-form button.btn-subscription {
    background-color: #f0b911;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-right: 15px;
    margin-left: 15px;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription:hover {
    background-color: #d9a70f;
    border-width: 1px;
    border-color: #d9a70f;
    border-style: solid;
    border-radius: 4px;
}

.subscription-form button.btn-subscription h4 {
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(0,0,0, .8);
}

.subscription-form button.btn-subscription p {
    color: rgba(0,0,0, .5);
}
.subscription-form button.btn-subscription:hover h4, .subscription-form button.btn-subscription:hover p {
    color: red;
}

<div class="subscription-form">
<button type="submit" class="btn btn-subscription btn-block">
    <h4>Yes! I Want This Book <i class="fas fa-angle-double-down"></i></h4>
    <p>... and the 50% Coupon Discount Code!</p>
</button>
</div>

How to change button text color on hover HTML

You need to target the <a> element

#buttons li:hover a {
  color: #000;
}

MUI Button hover background color and text color

You probably don't want to change the button's :active state but the default and the :hover state. The following sets the button color to #fff and the backgroundColor to #3c52b2 and switch them on :hover.

I'm not sure how you applied the updated styles (or how you tried to override the default styles), I created this snippet below with makeStyles() but the idea is the same with the withStyles() HOC.

const { 
  AppBar,
  Button,
  makeStyles,
  Toolbar,
  Typography,
} = MaterialUI

const useStyles = makeStyles({
  flexGrow: {
    flex: '1',
  },
  button: {
    backgroundColor: '#3c52b2',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#fff',
      color: '#3c52b2',
  },
}})

function AppBarWithButtons() {
  const classes = useStyles()
  
  return (
    <AppBar>
      <Toolbar>
        <Typography>
          YourApp
        </Typography>
        <div className={classes.flexGrow} />
        <Button className={classes.button}>
          Button 1
        </Button>
        <Button className={classes.button}>
          Button 2
        </Button>
      </Toolbar>
    </AppBar>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <AppBarWithButtons />
  </React.StrictMode>,
  document.getElementById("root")
)

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

        button {        background: #4e368f;        color: #ccc;        padding: 10px 30px;        margin-top: 0;        border: 0;;        -webkit-border-radius: 50px;        -moz-border-radius: 50px;        border-radius: 50px;    }    button:hover { background: #5e4999; }    button.go-now { width: 100%; }    button.go-now a { color: #ccc; text-decoration: none; }    button.go-now a:hover { color: #fff; }    button:hover .test{ color: #fff;    }

    <p style="text-align: center;"><button class="go-now"><a href="#" title="Go to Armis Console" class="test" target="_blank">Go Now</a></button></p>

a.btn { padding:0 10px; color:#000; border:1px solid;}a.btn:hover {  color:var(--h, yellow);}

<a href="#" class="btn btn-inv btn-lg" style="--h: #4a62ab">BUY</a><a href="#" class="btn btn-inv btn-lg" style="--h: red">BUY</a><a href="#" class="btn btn-inv btn-lg" style="--h: green">BUY</a><a href="#" class="btn btn-inv btn-lg" style="--h: #4a00fb">BUY</a><a href="#" class="btn btn-inv btn-lg">BUY</a> <!-- this one will get the default color (yellow) -->