在HTML/CSS中,如何使按钮看起来像div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (164)

HTML按钮允许您同时点击Enter或空格来点击按钮。然而,使用按钮还附带了一堆CSS,这破坏了我们希望按钮的外观。

是否有一种相对未来的、简单的方法来使用CSS来修复这个问题?只要看一下Chrome计算出来的CSS,按钮就会添加大量CSS属性。

提问于
用户回答回答于

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

  1. 背景色->更改按钮的背景色。
  2. 字体大小->更改按钮标签的字体大小.
  3. 填充->更改按钮的填充。
  4. 边框-半径->添加圆角的按钮.
  5. 边框属性->向按钮添加彩色边框。
  6. 框-阴影属性->向按钮添加阴影。

下面是一个彩色边框按钮示例:

<!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>

用户回答回答于

我只需要:

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

所属标签

可能回答问题的人

  • HKC

    红客学院 · 创始人 (已认证)

    26 粉丝7 提问5 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问3 回答
  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问3 回答
  • 螃蟹居

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券