CSS Buttons - 快速指南
CSS Buttons - Overview
网页上的按钮是用户在选择或输入所需输入后单击并发送详细信息以获取所需信息的主要参与者。 本教程重点介绍十个主要的CSS库，使按钮很棒，即 -
bttn.css - bttn.css库为按钮提供了大量简单样式。 该图书馆完全免费供个人和商业使用。 这些按钮可以轻松定制。
Pushy Buttons - Pushy Buttons库是一个小型的CSS Pressable Buttons库。
btns.css - btns.css按钮库是一组使用平滑过渡的CSS按钮。
Social Buttons - 社交按钮库是一组用纯CSS制作的CSS按钮，基于Bootstrap和Font Awesome。
Beautons - Beautons按钮库是一个用于创建按钮的简单CSS工具包。 它允许应用样式，大小的组合来创建一组一致，健壮和坚实的按钮。
CSS Buttons - bttn.css Usage
bttn.css库为按钮提供了大量简单样式。 该图书馆完全免费供个人和商业使用。 这些按钮可以轻松定制。
加载bttn.css
要加载btns.css库，请转到链接btns.css并将以下行粘贴到网页的“head”部分。
<head>
<b class="notranslate"><link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css"></b>
</head>
Using the Button
使用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>
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用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>
它将产生以下输出 -
Defining the Color
就像大小一样，您可以使用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 Buttons - bttn.css Available Styles
以下是bttn.css中提供的各种样式
| Sr. No. | 样式 | 中等大小 | 原色 | 演示 |
|---|---|---|---|---|
| 1 | bttn-slant | bttn-md | bttn-primary | |
| 2 | bttn-unite | bttn-md | bttn-primary | |
| 3 | bttn-pill | bttn-md | bttn-primary | |
| 4 | bttn-float | bttn-md | bttn-primary | |
| 5 | bttn-material-flat | bttn-md | bttn-primary | |
| 6 | bttn-material-circle | bttn-md | bttn-primary | |
| 7 | bttn-fill-circle | bttn-md | bttn-primary | |
| 8 | bttn-gradient | bttn-md | bttn-primary | |
| 9 | bttn-jelly | bttn-md | bttn-primary | |
| 10 | bttn-stretch | bttn-md | bttn-primary | |
| 11 | bttn-minimal | bttn-md | bttn-primary | |
| 12 | bttn-bordered | bttn-md | bttn-primary | |
| 13 | bttn-simple | bttn-md | bttn-primary |
CSS Buttons - Pushy Buttons Usage
Pushy Buttons库是一个小型的CSS Pressable Buttons库。
加载bttn.css
要加载pushy-buttons.min.css库，请从github下载css并将以下行粘贴到网页的“head”部分。
<head>
<b class="notranslate"><link rel = "stylesheet" href = "pushy-buttons.min.css"></b>
</head>
Using the Button
使用html按钮标记创建一个按钮，并使用大小说明符btn-lg添加样式btn，btn-blue。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">Submit</button>
</body>
</html>
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用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>
它将产生以下输出 -
Defining the Color
就像大小一样，您可以使用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 Buttons - btns.css Usage
btns.css按钮库是一组使用平滑过渡的CSS按钮。
加载bttn.css
要加载btns.css库，请转到链接btns.css并将以下行粘贴到网页的“head”部分。
<head>
<b class="notranslate"><link rel = "stylesheet" href = "btns.css"></b>
</head>
Using the Button
使用html按钮标记创建一个按钮，并使用大小说明符btn-lg添加样式btn，btn-blue。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-blue">Submit</button>
</body>
</html>
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用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>
它将产生以下输出 -
Defining the Color
就像大小一样，您可以使用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 Buttons - Social Buttons Usage
Social Buttons库是一组用纯CSS制作的CSS按钮，基于Bootstrap和Font Awesome。
加载社交按钮
要加载bootstrap-social.css库，请从github下载bootstrap-social.css并将以下行粘贴到网页的“head”部分。
<head>
<b class="notranslate"><link rel = "stylesheet" href = "bootstrap-social.css"></b>
</head>
Using the Button
使用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>
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用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>
它将产生以下输出 -
仅使用图标
以下示例显示如何选择仅图标按钮。
<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 Buttons - Social Buttons Available Styles
以下是社交按钮中提供的各种样式。
| Sr.No. | 样式 | 中等大小 | 按键 | 图标按钮 |
|---|---|---|---|---|
| 1 | btn-twitter | btn-md | 用Twitter登录 | |
| 2 | btn-bitbucket | 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-google | btn-md | 用Google登录 | |
| 9 | btn-btn-instagram | btn-md | 用Instagram登录 | |
| 10 | btn-btn-linkedin | btn-md | 使用领英账户登录 | |
| 11 | btn-btn-microsoft | btn-md | 用Microsoft登录 | |
| 12 | btn-btn-odnoklassniki | 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-yahoo | btn-md | 登录Yahoo |
CSS Buttons - Beautons Usage
Beautons按钮库是一个用于创建按钮的简单CSS工具包。 它允许应用样式，大小的组合来创建一组一致，健壮和坚实的按钮。
加载Beautons
要加载Beautons库，请从github下载css并将以下行粘贴到网页的“head”部分。
<head>
<b class="notranslate"><link rel = "stylesheet" href = "beauton.min.css"></b>
</head>
Using the Button
使用html按钮标签创建一个按钮并添加样式btn。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<Submit</button>
</body>
</html>
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用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.
