CSS按钮教程

CSS按钮 - bttn.css用法

bttn.css库提供按钮的大量简单样式.该图书馆完全免费供个人和商业使用.这些按钮可以轻松定制.

加载bttn.css

要加载btns.css库，请转到链接 btns.css 并将以下行粘贴到< head>网页的一部分.

<head>   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css"></head>

使用按钮

使用html按钮标记创建一个按钮并添加样式bttn-slant，bttn-royal with大小说明符bttn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

定义大小

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

定义颜色

就像大小，您可以使用CSS定义按钮的颜色.以下示例显示如何更改按钮的颜色.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>