带填充的普通按钮答案

【问题标题】：Plain Button With Padding带填充的普通按钮
【发布时间】：2017-03-26 05:05:46
【问题描述】：

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

如何让灰色消失？

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

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

【问题讨论】：

你能展示你的 HTML 吗？我猜测您将按钮包装在外部元素中并设置外部元素的样式。但是您可以直接设置按钮样式。然后您的背景颜色将覆盖按钮的灰色。编辑：实际上在这种情况下它是不可点击的。只需显示您的 html，以便我们提供帮助。
一定要为父母设置背景色而不是文本:)

标签： css button whitespace padding

【解决方案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;
}

【讨论】：

【解决方案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'

【讨论】：