CSS中的按钮默认有一些样式,比如背景颜色、边框等等。如果我们想让按钮没有任何样式,该怎么做呢?
button { background:none; border:none; outline:none; cursor:pointer; }
上面的代码就是用来去掉按钮样式的。具体来说,我们给按钮的背景、边框、外边框以及鼠标指针设置了一些属性。
background:none
:将按钮的背景设置为透明。border:none
:将按钮的边框设置为没有。outline:none
:去掉按钮的外边框,当按钮被点击时不会出现蓝色的默认外边框。cursor:pointer
:将鼠标指针设置为手型,表明按钮可以被点击。
当然,如果你觉得这些样式还不够清除按钮的样式,还可以添加其他样式,比如:
button { background:none; border:none; outline:none; cursor:pointer; padding:0; margin:0; font-size:inherit; }
上面的代码还添加了一些样式,如将按钮的内边距和外边距都设置为0,同时将字体大小设置为继承,让按钮的字体大小与父元素相同。
通过去掉按钮的样式,我们可以更好地自定义按钮的样式,让他们融入到我们的设计中。