CSS 按钮 - 快速指南

CSS 按钮 - 概述

网页上的按钮是主要参与者，用户在选择或输入所需的输入后单击并提交详细信息以获取所需的信息。本教程重点介绍十个主要的 CSS 库，使按钮变得很棒，即 -

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

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

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

  • 社交按钮- 社交按钮库是一组纯 CSS 制作的 CSS 按钮，基于 Bootstrap 和 Font Awesome。

  • Beautons - Beautons 按钮库是一个用于创建按钮的简单 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 以及尺寸说明符 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>

它将产生以下输出 -

CSS 按钮 - bttn.css 可用样式

以下是 bttn.css 中可用的各种样式

先生。没有。 风格 中等大小 原色 演示
1 btn-倾斜 bttn-MD btn-主要
2 btn 联合 bttn-MD btn-主要
3 btn-药丸 bttn-MD btn-主要
4 btn-浮动 bttn-MD btn-主要
5 btn-材质-平面 bttn-MD btn-主要
6 btn-材质圈 bttn-MD btn-主要
7 btn-填充圆 bttn-MD btn-主要
8 btn-渐变 bttn-MD btn-主要
9 btn-果冻 bttn-MD btn-主要
10 bttn 拉伸 bttn-MD btn-主要
11 btn-最小 bttn-MD btn-主要
12 btn 边框 bttn-MD btn-主要
13 btn-简单 bttn-MD btn-主要

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>

它将产生以下输出 -

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>

它将产生以下输出 -

CSS 按钮 - 社交按钮用法

Social Buttons 库是一组纯 CSS 制作的 CSS 按钮，基于 Bootstrap 和 Font Awesome。

加载社交按钮

要加载 bootstrap-social.css 库，请从github下载 bootstrap-social.css并将以下行粘贴到网页的 <head> 部分。

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

使用按钮

使用 html 锚标记创建一个按钮，并使用社交说明符 btn-social 添加样式 btn、btn-block。

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

它将产生以下输出 -

Login with Twitter

定义尺寸

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

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

它将产生以下输出 -

Login with Twitter Login with Twitter Login with Twitter Login with Twitter

仅使用图标

以下示例显示如何选择仅图标按钮。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

它将产生以下输出 -

CSS 按钮 - 社交按钮可用样式

以下是社交按钮中可用的各种样式。

先生。 风格 中等大小 按钮 图标按钮
1 btn-twitter btn-MD 使用 Twitter 登录
2 btn 位桶 btn-MD 使用 Bitbucket 登录
3 btn-dropbox btn-MD 使用 Dropbox 登录
4 btn-facebook btn-MD 使用 Facebook 登录
5 btn-btn-flickr btn-MD 使用 Flickr 登录
6 btn-btn-foursquare btn-MD 使用 Foursquare 登录
7 btn-btn-github btn-MD 使用 Github 登录
8 btn-btn-谷歌 btn-MD 使用谷歌登录
9 btn-btn-instagram btn-MD 使用 Instagram 登录
10 btn-btn-linkedin btn-MD 使用领英账户登录
11 btn-btn-微软 btn-MD 使用微软登录
12 btn-btn-奥德诺克拉斯尼基 btn-MD 使用 Odnoklassniki 登录
13 btn-btn-openid btn-MD 使用 Openid 登录
14 btn-btn-pinterest btn-MD 使用 Pinterest 登录
15 btn-btn-reddit btn-MD 使用 Reddit 登录
16 btn-btn-soundcloud btn-MD 使用 Soundcloud 登录
17 号 btn-btn-tumblr btn-MD 使用 Tumblr 登录
18 btn-btn-twitter btn-MD 使用 Twitter 登录
19 btn-btn-vimeo btn-MD 使用 Vimeo 登录
20 btn-btn-vk btn-MD 使用 Vk 登录
21 btn-btn-雅虎 btn-MD 使用雅虎登录

CSS 按钮 - Beautons 用法

Beautons 按钮库是一个用于创建按钮的简单 CSS 工具包。它允许应用样式、尺寸的组合来创建大量一致、坚固且坚固的按钮。

加载 Beauton

要加载 Beautons 库，请从github下载 css并将以下行粘贴到网页的 <head> 部分。

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

使用按钮

使用 html 按钮标签创建一个按钮并添加样式 btn。

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

它将产生以下输出 -

定义尺寸

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

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

它将产生以下输出 -









定义字体大小

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

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

它将产生以下输出 -







定义功能按钮

以下示例显示了各种功能按钮。

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

它将产生以下输出 -











结合风格

以下示例展示了如何组合按钮的样式。

现场演示 
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

它将产生以下输出 -







A in a paragraph.