I want to use hover on my button. The button is in my php code

Question

I tried to make a class but it didn't work so I tried in style to make it hover but it doesn't work as well. How can I make the background color of the button change when I hover. Or how can I make a class in php?

<?php if (isset($_SESSION['uID'])) {
            echo "<form action='includes/logout.inc.php' >
                    <button>LOG OUT </button>
                </form>";
            } else {
                echo" <form action='includes/login.inc.php' method='POST'>
                    <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                    <input type='password' name='uWachtwoord' placeholder='Wachtwoord'> 
            <button style='background-color:orange;color:white;border-width:0px;width:300px;height:50px;font-family:BerlinSansFB;font-size:30px;hover:background-color:black;' name='button' id='button' type='submit'>LOGIN</button>
                </form>";
            } ?>

Read up on [CSS hover states](http://stackoverflow.com/questions/905033/how-to-use-hover-in-css) — Brett Gregson, Mar 11 '17 at 12:23
http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles or http://stackoverflow.com/questions/26376496/how-to-write-hover-using-inline-style. — Rwd, Mar 11 '17 at 12:27
Possible duplicate of [How to write :hover using inline style?](http://stackoverflow.com/questions/26376496/how-to-write-hover-using-inline-style) — Adonis, Mar 11 '17 at 17:22

kishor soneji · Answer 1 · 2017-03-14T19:42:30.673

2

Try this with internal css.

    <style> 
.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}
</style>

Give this class to your button and try it. Thanks.

edited Mar 14 '17 at 19:42

answered Mar 11 '17 at 12:27

kishor soneji

795
1
9
16

score 1 · Answer 2 · answered Mar 11 '17 at 12:26

1

Move all those styles into a separate CSS file, and then use the :hover pseudo-class, like this:

button {
  /* All those styles */
}

button:hover {
    /* Stuff you want to override on hover. For example: */
    background-color: #f00;
}

answered Mar 11 '17 at 12:26

Ray O'Donnell

759
4
11

score 0 · Answer 3 · answered Mar 11 '17 at 12:27

Have changed your code : add class name "login-button" for button

<?php if (isset($_SESSION['uID'])) {
            echo "<form action='includes/logout.inc.php' >
                    <button>LOG OUT </button>
                </form>";
            } else {
                echo" <form action='includes/login.inc.php' method='POST'>
                    <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                    <input type='password' name='uWachtwoord' placeholder='Wachtwoord'> 
            <button class='login-button' name='button' id='button' type='submit'>LOGIN</button>
                </form>";
            } ?>

Put CSS :

.login-button { background-color:orange;color:white;border-width:0px;width:300px;height:50px;font-family:BerlinSansFB;font-size:30px; }
.login-button:hover { background-color:black; }

hcheung · Answer 4 · 2017-03-11T12:45:45.927

You will need to have a button:hover {} css styling that is separate from button {} styling.

It is better to separate the css from html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            button {
              background-color:orange;
              color:white;
              border-width:0px;
              width:300px;
              height:50px;
              font-family:BerlinSansFB;
              font-size:30px;
            }
            button:hover {
              background-color:black;
            }
        </style>
    </head>
    <body>
        <?php if ( isset($_SESSION['uID']) ): ?>
            <form action='includes/logout.inc.php' >
                <button>LOG OUT </button>
            </form>
        <?php else: ?>
            <form action='includes/login.inc.php' method='POST'>
                <input type='text' name='u_Email' placeholder='E-mail'> <br/>
                <input type='password' name='uWachtwoord' placeholder='Wachtwoord'>
                <button name='button' id='button' type='submit'>LOGIN</button>
            </form>
        <?php endif ?>
    </body>
</html>

I want to use hover on my button. The button is in my php code

4 Answers4