CSS按钮 - bttn.css用法( 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>
它将产生以下输出 -
