Обычная кнопка с прокладкой

Question

Следующие CSS, очевидно, приводят к следующей кнопке. Как видите, в белом дополнении есть странная серая гладкая кнопка. Как это исправить?

Как заставить серый уйти?

.button_style { 
    background-color: white; 
    color: white; 
    padding: 15px 15px; 
    text-align: center; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
} 

ПРИМЕЧАНИЕ: Зеленый пространство фон, белое пространство и серое пространство является интерактивной кнопкой.

Answer 1

Это то, что я был ранее, который дает мне обычную серую кнопку:

<p><span class="button_style"><a href="example.com">Website</a></span> </p> 

Я изменил его к следующему, который разрешил мою проблему:

<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" /> 

ПРИМЕЧАНИЕ: JavaScript должен быть включен для того, чтобы использовать 'OnClick = "location.href'

Answer 2

Используйте границу: 0 или border: none, чтобы удалить это. Кстати, какой браузер вы используете?

HTML

<button class="button_style">hello</button> 

CSS

.button_style { 
    border: 0; 
    background-color: white; 
    padding: 15px 15px; 
    text-align: center; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
}