关闭按钮

一个通用的关闭按钮,用于关闭情态动词和警报等内容。

更新于: 2023-04-30 14:28:21 查看: 495

发布于: 2021-9-3 19:25 发布者: 大米

示例 

提供使用 .btn-close 关闭或关闭组件的选项。默认样式是有限的,但高度可自定义。
<button type="button" class="btn-close" aria-label="Close"></button>

禁用状态

禁用的关闭按钮更改其 opacity。我们还应用了 pointer-events: none 和 user-select: none 来防止触发悬停和活动状态。
<button type="button" class="btn-close" disabled aria-label="Close"></button>

深色按钮组

改变默认的 .btn-close 变成带有 .btn-close-white的类,这个类使用 filter 属性反转背景图片
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。