物化 CSS |纽扣

物化 CSS 是一种基于 CSS 的设计语言，旨在为 Web 应用程序带来一致的外观和体验。它提供了一套美观，一致和易于使用的界面组件，这些组件旨在为 Web 开发人员提供以最小的代码量创建出现代化的应用程序所需的一切。

纽扣是物化 CSS 提供的其中一种界面组件，它是指小而紧凑的几何形状，用于触发一个操作，例如提交表单或取消操作。纽扣在 Web 应用程序中广泛使用。

特点

• 物化 CSS 在设计上遵循了 Material Design 规范
• 物化 CSS 提供了丰富的界面组件，可高效地构建 Web 应用程序
• 纽扣样式简单易用，适用于各种类型的应用程序

安装

你可以从物化 CSS 的官方网站下载最新的版本，或者使用包管理器安装：

NPM

npm install materialize-css

Yarn

yarn add materialize-css

使用

物化 CSS 的纽扣使用简单直观，以下是一个基本的示例：

<a class="waves-effect waves-light btn">Button</a>

你也可以根据自己的需要修改纽扣的样式：

<a class="waves-effect waves-light btn red darken-2">Button</a>

示例

以下是一些漂亮的纽扣，你可以在自己的应用程序中使用它们：

<a class="waves-effect waves-light btn">Button</a>
<a class="waves-effect waves-light btn-small">Button</a>
<a class="waves-effect waves-light btn-floating"><i class="material-icons">add</i></a>
<a class="waves-effect waves-light btn-large">Button</a>
<a class="waves-effect waves-light btn disabled">Button</a>
<a class="waves-effect waves-light btn-small disabled">Button</a>
<a class="waves-effect waves-light btn-floating disabled"><i class="material-icons">add</i></a>
<a class="waves-effect waves-light btn-large disabled">Button</a>
<a class="waves-effect waves-light btn red">Button</a>
<a class="waves-effect waves-light btn-small blue">Button</a>
<a class="waves-effect waves-light btn-floating green"><i class="material-icons">add</i></a>
<a class="waves-effect waves-light btn-large purple">Button</a>

结论

使用物化 CSS 的界面组件，特别是纽扣，可以更快速，更加一致地构建出现代化的 Web 应用程序。 物化 CSS 提供了易于使用的 API，可以帮助你更快速地构建 UI，同时遵循 Material Design 规范。