HTML 按钮允许您同时按回车键或空格键来点击按钮。但是,使用按钮还附带了一堆CSS,这些CSS破坏了我们希望按钮的外观。
有没有一种相对面向未来的简单方法来使用 CSS 解决此问题?仅查看从chrome计算的CSS,该按钮就添加了很多CSS属性。
我只能用:
button {
background-color: transparent;
border: none;
}
一些CSS样式应该始终能够应用于HTML按钮:
- 背景色 ->更改按钮的背景颜色。
- font-size ->更改按钮标签的字体大小。
- 填充 ->更改按钮的填充。
- 边框半径 ->向按钮添加圆角。
- 边框属性 ->向按钮添加彩色边框。
- box-shadow 属性 ->向按钮添加阴影。
下面是一个彩色边框按钮示例:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: white; /* button background */
color: black; /* label colour */
border: 2px solid #0040ff; /* 2px blue line border */
padding: 10px 20px;
border-radius: 10px; /* rounded corner style */
}
</style>
</head>
<body>
<h2>A styled button.</h2>
<button class="button">Button label</button>
</body>
</html>