CSS 按钮 - Pushy 按钮的用法

Pushy Buttons 库是一个小型 CSS 可按下按钮库。

加载 bttn.css

要加载 Pushy-buttons.min.css 库，请从github下载 css并将以下行粘贴到网页的 <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>

它将产生以下输出 -