CODEWITHSUNDEEP
javascripthtmlcssbutton
VladJ
VladJ

Reputation: 117

Change background of a button when I hover it?

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"?

Upvotes: 0

Views: 150

Answers (4)

Khan Luke
Khan Luke

Reputation: 168

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

Upvotes: 1

Infem 401 CedupHH
Infem 401 CedupHH

Reputation: 106

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>

Upvotes: 0

Olly
Olly

Reputation: 371

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.

Upvotes: 0

Gynteniuxas
Gynteniuxas

Reputation: 7093

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.

Upvotes: 0

Related Questions