Strange white thing appear onmouseover CSS button - html

Question

I am trying to make a CSS3 button.
Problem: When I mouseover the button, a white thing appears from the bottom of the button. I narrow this problem down to the background-position: 0 -15px; CSS property, but how can I tweak it such that the gradient changes of mouseover but avoid the white thing from appearing? Thanks!
JSfiddle: http://jsfiddle.net/7LT35/

Answer 1

You have to change the background-size value!
Insert to .btn this:
background-size:1px 53px;
and adjust your gradient! Than it (hopefully) will work!
Here's a result: http://jsfiddle.net/7LT35/6/
But I think it's not the correct gradient!

Answer 2

The "white thing" is just the button's background colour.
The gradient image is the exact size of the button. So if you move it, of course it's not going to cover the button any more.
Personally, I would suggest just making a gradient image and doing what you want with that.
PS. Please don't use IE "hacks" and filter properties unless you actually test them to make sure they do what you intend them to do.

Answer 3

The white thing is your background gradient. You are telling the element to only move up 15px on hover.
You should also put the transition on the static class and not the hover psuedo element.
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
..more styles
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover {
color: #333333;
text-decoration: none;
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
}
This makes the white/grey gradient appear on hover. Not sure what you were wanting to do with the transitions.
Check out the fiddle