Change background of a button when I hover it?

Question

How can I make the background image of a button change when I hover it? Maybe make the image fade from left to right? Is this "doable"?

Answer 1

On your initial button style you have the {background:url('image1.jpeg'); width:100%;}. then CREATE another style called #button:hover {background:url('image2.jpeg);} Your 'maybe' effect can be achieved by adding a transition to your style #button

Answer 2

An example code snap:

<button id="buttonID">Search</button>

<style>
#buttonID:hover
{
    background-color: black;
    color: white;
}
enter code here
</style>

Simply give an ID or class and in stylesheet #elementID:hover name of that button.

Answer 3

This answer solves it quite nicely, not sure about the fading in from left to right, but I'm sure it's possible I just don't know css that well

How can I change a button's color on hover?

You want the background variable.

Answer 4

Try to do with Linear gradient (maybe you can do with a image!!(or not))

  
    #btn{
            width:20%;
            border: solid 1px rgba(171, 156, 156, 0.56);
            border-radius:15px;
            background: linear-gradient(to right, #2ede13 50%,#7ed755 50%);
            background-size: 200% 100%;
            background-position: right bottom;
            transition-property: all;
            transition: 1s;
        }
    
            #btn:hover {
                background-position: left bottom;
                color: black;
            }

 <button id="btn">Search</button>