Fill button with a different color on hover

Question

enter image description here

Is there anyway to use CSS to achieve the above effect when mouse over on the button?

Thanks!

Welcome to Stack Overflow. Unfortunately, we're not a coding service. What have you tried so far? We can help you with code that isn't working but we're not here to write it for you. — Paulie_D, Nov 20 '14 at 10:20

score 4 · Answer 1 · answered Nov 20 '14 at 10:24

You can achieve what you are looking for by using a background gradient:

Create your gradient with two stops at 50%, your two colours on either side of the stops.
Make your background take up 200% the width of the element with background-size
Have your background position itself -100%
Move the background into position on :hover.

Note: Be sure to include browser prefixes where appropriate.

.menu{
    padding: 20px 40px;
    font-size: 32px;
    font-family: Arial, sans-serif;
    background: #F00;
    display: inline-block;
    background: linear-gradient(to right, #f8b3b5 0%, #f8b3b5 50%, #ffffff 50%, #ffffff 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.3s;
}

.menu:hover{
    background-position:0 0;
}

<div class='menu'>Menu</div>

score 2 · Answer 2 · answered Nov 20 '14 at 10:23

There is, a working fiddle here: http://jsfiddle.net/84fpp167/ You basically make a wrapper div, position the div you want to slide absolute to it. Then you use the :hover on the wrapper div to transition the absolute position of the slide div untill the position is left:0 with a speed of 1 second.

 .wrapper {
     position: relative;
     overflow: hidden;
     width: 100px;
     height: 100px; 
     border: 1px solid black;
}
#slide {
     position: absolute;
     left: -100px;
     width: 100px;
     height: 100px;
     background: #FFADAD;
     transition: 1s;
     height:100%;
 }
.wrapper:hover #slide {
     transition: 1s;
     left: 0;
}

score 2 · Accepted Answer · answered Nov 20 '14 at 10:44

demo - http://jsfiddle.net/victor_007/1y2jw6wh/

added pseudo element :before and background-color

.menu {
  padding: 20px 40px;
  font-size: 32px;
  font-family: Arial, sans-serif;
  display: inline-block;
  position: relative;
}
.menu:before {
  content: '';
  background: #FFADAD;
  position: absolute;
  width: 0%;
  top: 0;
  left: 0;
  height: 100%;
  transition: 0.3s linear;
  z-index: -1;
}
.menu:hover:before {
  width: 100%;
}

<div class='menu'>Menu</div>

score 0 · Answer 4 · edited May 23 '17 at 11:51

At first search the stack

You must read about css transitions, you will be use ease-in and background-color properties.

http://www.w3schools.com/css/css3_transitions.asp

Nobody gone code it for you, make an effort and do somethibg with your own.

The transitions showroom - http://codepen.io/davekilljoy/pen/wHAvb, mess with the code to make desired effect. Njoy !

Post with the similar problem :

form stack search 1

form stack search 2

Fill button with a different color on hover

4 Answers4