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