CODEWITHSUNDEEP
css
clement
clement

Reputation: 101

Fill button with a different color on hover

enter image description here

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

Thanks!

Upvotes: 3

Views: 10695

Answers (4)

user1597594
user1597594

Reputation: 523

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

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 2

George
George

Reputation: 36784

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>

Upvotes: 4

Jan_dh
Jan_dh

Reputation: 771

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;
}

Upvotes: 2

Related Questions