CSS 按钮 - btns.css 用法

btns.css 按钮库是一组利用平滑过渡的 CSS 按钮。

加载 bttn.css

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

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

使用按钮

使用 html 按钮标签创建一个按钮，并添加样式 btn、btn-blue 和大小说明符 btn-lg。

现场演示

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

它将产生以下输出 -

定义尺寸

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

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>

它将产生以下输出 -

定义颜色

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

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

它将产生以下输出 -

定义风格

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

现场演示

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

它将产生以下输出 -