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"?
Asked
Active
Viewed 143 times
4 Answers
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

Khan Luke
- 168
- 1
- 13
0
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.

Gynteniuxas
- 7,035
- 18
- 38
- 54
0
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.
0
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>

Infem 401 CedupHH
- 106
- 2
- 9
-
maybe this helps http://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element – Infem 401 CedupHH Apr 20 '16 at 21:18