css中号的用法,CSS Buttons - 快速指南
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”部分。
Using the Button
使用html按钮标签创建一个按钮，并添加样式bttn-slant，bttn-royal，大小指定符为bttn-lg。
Submit
它将产生以下输出 -
Submit
定义的大小 (Defining the Size)
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Large
Medium
Small
Extra Small
它将产生以下输出 -
Large
Medium
Small
Extra Small
Defining the Color
就像大小一样，您可以使用CSS定义按钮的颜色。 以下示例显示如何更改按钮的颜色。
Primary
Warning
Danger
Success
Royal
它将产生以下输出 -
Primary
Warning
Danger
Success
Royal
CSS Buttons - bttn.css Available Styles
以下是bttn.css中提供的各种样式Sr. No.样式中等大小原色演示
1bttn-slantbttn-mdbttn-primary介质
2bttn-unitebttn-mdbttn-primary介质
3bttn-pillbttn-mdbttn-primary介质
4bttn-floatbttn-mdbttn-primary介质
5bttn-material-flatbttn-mdbttn-primary介质
6bttn-material-circlebttn-mdbttn-primary中号
7bttn-fill-circlebttn-mdbttn-primary介质
8bttn-gradientbttn-mdbttn-primary介质
9bttn-jellybttn-mdbttn-primary介质
10bttn-stretchbttn-mdbttn-primary介质
11bttn-minimalbttn-mdbttn-primary介质
12bttn-borderedbttn-mdbttn-primary介质
13bttn-simplebttn-mdbttn-primary介质
CSS Buttons - Pushy Buttons Usage
Pushy Buttons库是一个小型的CSS Pressable Buttons库。
加载bttn.css
要加载pushy-buttons.min.css库，请从github下载css并将以下行粘贴到网页的“head”部分。
Using the Button
使用html按钮标记创建一个按钮，并使用大小说明符btn-lg添加样式btn，btn-blue。
Submit
它将产生以下输出 -
Submit
定义的大小 (Defining the Size)
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Large
Normal
Medium
Small
它将产生以下输出 -
Large
Normal
Medium
Small
Defining the Color
就像大小一样，您可以使用CSS定义按钮的颜色。 以下示例显示如何更改按钮的颜色。
Large
Normal
Medium
它将产生以下输出 -
Large
Normal
Medium
CSS Buttons - btns.css Usage
btns.css按钮库是一组使用平滑过渡的CSS按钮。
加载bttn.css
要加载btns.css库，请转到链接btns.css并将以下行粘贴到网页的“head”部分。
Using the Button
使用html按钮标记创建一个按钮，并使用大小说明符btn-lg添加样式btn，btn-blue。
Submit
它将产生以下输出 -
Submit
定义的大小 (Defining the Size)
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Large
Small
它将产生以下输出 -
Large
Small
Defining the Color
就像大小一样，您可以使用CSS定义按钮的颜色。 以下示例显示如何更改按钮的颜色。
Red
Blue
Green
Sea
Yellow
Orange
Purple
Black
Cloud
Grey
它将产生以下输出 -
Red
Blue
Green
Sea
Yellow
Orange
Purple
Black
Cloud
Grey
定义风格
就像大小，颜色一样，您可以使用CSS定义按钮的样式。 以下示例显示如何更改按钮的样式。
Regular
Round
Raised
Small
Outlined
它将产生以下输出 -
Regular
Round
Raised
Small
Outlined
CSS Buttons - Social Buttons Usage
Social Buttons库是一组用纯CSS制作的CSS按钮，基于Bootstrap和Font Awesome。
加载社交按钮
要加载bootstrap-social.css库，请从github下载bootstrap-social.css并将以下行粘贴到网页的“head”部分。
Using the Button
使用html锚标记创建一个按钮，并使用社交说明符btn-social添加样式btn，btn-block。
Login with Twitter
它将产生以下输出 -
定义的大小 (Defining the Size)
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Login with Twitter
Login with Twitter
Login with Twitter
Login with Twitter
它将产生以下输出 -
仅使用图标
以下示例显示如何选择仅图标按钮。
它将产生以下输出 -
CSS Buttons - Social Buttons Available Styles
以下是社交按钮中提供的各种样式。Sr.No.样式中等大小按键图标按钮
1btn-twitterbtn-md
2btn-bitbucketbtn-md
3btn-dropboxbtn-md
4btn-facebookbtn-md
5btn-btn-flickrbtn-md
6btn-btn-foursquarebtn-md
7btn-btn-githubbtn-md
8btn-btn-googlebtn-md
9btn-btn-instagrambtn-md
10btn-btn-linkedinbtn-md
11btn-btn-microsoftbtn-md
12btn-btn-odnoklassnikibtn-md
13btn-btn-openidbtn-md
14btn-btn-pinterestbtn-md
15btn-btn-redditbtn-md
16btn-btn-soundcloudbtn-md
17btn-btn-tumblrbtn-md
18btn-btn-twitterbtn-md
19btn-btn-vimeobtn-md
20btn-btn-vkbtn-md
21btn-btn-yahoobtn-md
CSS Buttons - Beautons Usage
Beautons按钮库是一个用于创建按钮的简单CSS工具包。 它允许应用样式，大小的组合来创建一组一致，健壮和坚实的按钮。
加载Beautons
要加载Beautons库，请从github下载css并将以下行粘贴到网页的“head”部分。
Using the Button
使用html按钮标签创建一个按钮并添加样式btn。
它将产生以下输出 -
Submit
定义的大小 (Defining the Size)
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Small
Large
Huge
Full
它将产生以下输出 -
Small
Large
Huge
Full
定义字体大小
您可以通过使用CSS定义按钮的大小并将其与类名一起使用来增大或减小按钮的大小，如下所示。 在给定的示例中，我们更改了四种尺寸。
Huge
Large
Regular
它将产生以下输出 -
Huge
Large
Regular
定义功能按钮
以下示例显示了各种功能按钮。
Positive
Negative
Disabled
Rounded
Hard
它将产生以下输出 -
Positive
Negative
Disabled
Rounded
Hard
结合样式
以下示例显示如何组合按钮的样式。
Button
Button
Button
A button in a paragraph.
它将产生以下输出 -
Button
Button
Button
A button in a paragraph.
CSS按钮 - Beautons用法( Beautons Usage)