CSS 按钮 - Beautons 用法

Beautons 按钮库是一个用于创建按钮的简单 CSS 工具包。它允许应用样式、尺寸的组合来创建大量一致、坚固且坚固的按钮。

加载 Beauton

要加载 Beautons 库，请从github下载 css并将以下行粘贴到网页的 <head> 部分。

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

使用按钮

使用 html 按钮标签创建一个按钮并添加样式 btn。

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

它将产生以下输出 -

定义尺寸

您可以通过使用 CSS 定义按钮的大小并将其与类名称一起使用来增大或减小按钮的大小，如下所示。在给定的示例中，我们更改了四种尺寸。

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

它将产生以下输出 -

定义字体大小

您可以通过使用 CSS 定义按钮的大小并将其与类名称一起使用来增大或减小按钮的大小，如下所示。在给定的示例中，我们更改了四种尺寸。

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

它将产生以下输出 -

定义功能按钮

以下示例显示了各种功能按钮。

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

它将产生以下输出 -

结合风格

以下示例展示了如何组合按钮的样式。

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

它将产生以下输出 -

A in a paragraph.