CSS按钮-bttn.css可用样式介绍

CSS按钮-bttn.css是一个轻量级的CSS文件，它提供了多种按钮样式以及悬停和被选中状态的样式，可以轻松地自定义样式以适应不同的设计需求。本文将介绍bttn.css中可用的样式。

安装和使用

要使用CSS按钮-bttn.css，您需要将其下载并包含在您的HTML文档中。您可以通过以下代码从CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bttn.css/dist/bttn.css">

之后，您可以在任何按钮元素上使用bttn样式类来应用其样式：

<button class="bttn">默认按钮样式</button>

可用样式

bttn.css提供了许多不同的样式，适用于不同的按钮类型。以下是一些常用的样式：

.bttn

默认bttn样式类会为按钮应用标准样式：

<button class="bttn">默认按钮样式</button>

.bttn-fill

这个样式会使按钮填满整个容器，而不是只有文字周围的空间：

<button class="bttn-fill">填满按钮样式</button>

.bttn-outline

这个样式会使按钮有边框，而不是填充整个容器：

<button class="bttn-outline">轮廓按钮样式</button>

.bttn-primary

这个样式会使按钮看起来比其他样式更加突出：

<button class="bttn-primary">主要按钮样式</button>

.bttn-danger

这个样式用于表示危险操作，通常使用红色：

<button class="bttn-danger">危险按钮样式</button>

.bttn-sm

这个样式会使按钮变小：

<button class="bttn-sm">小按钮样式</button>

.bttn-lg

这个样式会使按钮变大：

<button class="bttn-lg">大按钮样式</button>

.bttn-disabled

这个样式可用于切换禁用状态的按钮：

<button class="bttn-disabled" disabled>禁用按钮样式</button>

悬停和被选中状态

每种样式还提供了悬停和被选中状态的样式，以更好地反映用户与按钮交互的状态。例如，您可以将以下样式应用于默认样式按钮：

<button class="bttn bttn-fill bttn-sm bttn-success">成功按钮样式</button>

以上代码将创建一个小型、填充的、淡绿色的按钮。当用户将鼠标悬停在按钮上时，它将变成更深的绿色色调。在用户点击按钮时，它将变成更深的深绿色色调以表示选中状态。

自定义样式

如果您希望将按钮样式与您的网站或应用程序的主题相匹配，bttn.css还允许您轻松自定义样式。您可以通过以下方式覆盖默认样式：

.bttn {
  background-color: #FF0000;
  color: #FFFFFF;
}

以上CSS规则将更改默认样式的背景颜色和文本颜色。您可以通过类似的方法更改其他属性，如字体、大小或边框等。

结论

CSS按钮-bttn.css提供了多种不同的按钮样式和悬停、被选中状态样式，以帮助您创建符合设计需求的按钮。通过引入css文件并将其样式应用于按钮元素，您可以轻松地开始使用它。如果需要自定义样式，您可以轻松地覆盖默认样式以满足自己的需求。