CSS按钮教程

CSS按钮 - 推动按钮使用

Pushy Buttons库是一个小型的CSS Pressable Buttons库.

正在加载bttn.css

要加载pushy-buttons.min.css库，请从 github 并将以下行粘贴到< head>网页的一部分.

<head>   <link rel = "stylesheet" href = "pushy-buttons.min.css"></head>

使用按钮

使用html按钮标签创建按钮并添加样式btn，btn-blue和尺寸说明符btn-lg.

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

定义大小

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

定义颜色

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>