Beautons按钮库是一个用于创建按钮的简单CSS工具包.它允许应用样式，大小的组合来创建一组一致，健壮和坚实的按钮.
加载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>
