Question

HTML按钮可让您同时按下Enter键或空格来按下按钮。但是，使用按钮还附带了一堆CSS，这些CSS破坏了我们希望按钮的外观。

使用CSS可以相对简单地解决此问题吗？只需从chrome查看计算出的CSS，该按钮就会添加大量CSS属性。

Answer 1

您应该始终可以将某些CSS样式应用于HTML按钮：

background-color->更改按钮的背景颜色。
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>

Answer 2

我可以通过以下方式修复它：

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

html / css，使按钮看起来像div

2 个答案: