Странная белая вещь появляется onmouseover Кнопка CSS

Question

Я пытаюсь создать кнопку CSS3.

Проблема: Когда я наводил курсор на кнопку, из нижней части кнопки появляется белая вещь. Я сужу эту проблему до свойства CSS background-position: 0 -15px;, но как я могу ее настроить таким образом, чтобы изменения градиента мыши, но избегали появления белых? Благодаря!

JSfiddle: http://jsfiddle.net/7LT35/

Answer 1

Вы должны изменить значение background-size! Вставить в .btn это:

background-size:1px 53px; 

и настроить градиент! Чем он (надеюсь) будет работать! Вот результат: http://jsfiddle.net/7LT35/6/ Но я думаю, что это не правильный градиент!

Answer 2

"Белая вещь" просто баттон цвет фона.

Градиентное изображение - это точный размер кнопки. Поэтому, если вы переместите его, конечно, он больше не будет закрывать кнопку.

Лично я бы предложил просто сделать изображение градиента и сделать то, что вы хотите.

PS. Пожалуйста, не используйте IE-хаки и свойства фильтра, если вы на самом деле не проверяете их, чтобы убедиться, что они делают то, что вы им намереваетесь делать.

Answer 3

Белая вещь - ваш фоновый градиент. Вы говорите элементу, чтобы он двигался только на 15px при наведении.

Вы также должны поместить переход на статический класс, а не на элемент hover psuedo.

.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); 

} 

Это означает, что градиент «белый/серый» появляется при наведении указателя мыши. Не уверен, что вы хотели сделать с переходами.

Отъезд fiddle