CSS按钮教程

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 = "https://img01.yuandaxia.cn/Content/img/tutorials/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

定义大小

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

 
< html> 
< head> 
< link rel ="stylesheet"href ="https://img01.yuandaxia.cn/Content/img/tutorials/css_buttons/btns.css"> 
</head> 
< body> 
< button class ="btn btn-lg btn-blue"> Large</button> 
< button class ="btn btn-sm btn-blue">小</button> 
</body> 
</html>

Defining the Color

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/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>

Defining the Style

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://img01.yuandaxia.cn/Content/img/tutorials/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>