带填充的普通按钮

Question

以下 CSS 显然会产生以下按钮。如您所见，白色填充内有一个奇怪的灰色普通按钮。我该如何解决？

如何让灰色消失？

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

注意：绿色space是背景，白色space和灰色space都是可点击的按钮。

Answer 1

使用 border: 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;
}

Answer 2

这是我以前的，给我一个普通的灰色按钮：

<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'

带填充的普通按钮

Plain Button With Padding

css

whitespace

button

padding