按钮样式无 - CSS

在Web开发中，按钮是网页中常见的交互元素。按钮通过点击或者鼠标悬停来触发一些事件。在CSS中，我们可以通过样式属性来改变按钮的显示效果，如背景色、边框等。但有时候，我们可能需要一个完全没有样式的按钮，这时候就需要用到CSS的样式重置。

样式重置

样式重置是指将所有的浏览器默认样式都重置为相同的值。这样做的好处是可以避免浏览器之间的差异导致的样式问题。下面是一些样式重置代码：

/* 重置样式 */

/* 所有元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* 超链接 */
a {
    text-decoration: none;
    color: inherit;
}

/* 表单元素 */
input,
textarea,
select {
    border: none;
    outline: none;
    font-size: 16px;
}

button {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}

去除按钮的样式

如果想要去除按钮的样式，只需要设置它的背景和边框为none，文字颜色为inherit即可。代码如下：

button {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

这样就得到了一个没有样式的按钮。

浏览器默认样式

不同浏览器对按钮的默认样式不尽相同，所以我们需要对不同浏览器进行适配。下面是一些浏览器默认样式的例子：

/* Chrome */
button::-webkit-inner-spin-button,
button::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Safari */
button::-webkit-input-placeholder {
    color: #999;
    font-style: italic;
}

/* IE */
button::-ms-clear {
    display: none;
}

结论

创建没有样式的按钮只需要设置按钮的背景、边框、文字颜色为none即可。但为了避免浏览器差异带来的问题，有必要对按钮进行重置或者对不同浏览器的默认样式进行适配。