HTML / CSS,使按钮看起来像div



HTML 按钮允许您同时按回车键或空格键来点击按钮。但是,使用按钮还附带了一堆CSS,这些CSS破坏了我们希望按钮的外观。

有没有一种相对面向未来的简单方法来使用 CSS 解决此问题?仅查看从chrome计算的CSS,该按钮就添加了很多CSS属性。

我只能用:

button {
background-color: transparent;
border: none;
}

一些CSS样式应该始终能够应用于HTML按钮:

  1. 背景色 ->更改按钮的背景颜色。
  2. font-size ->更改按钮标签的字体大小。
  3. 填充 ->更改按钮的填充。
  4. 边框半径 ->向按钮添加圆角。
  5. 边框属性 ->向按钮添加彩色边框。
  6. 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>


最新更新