推动按钮使用(Pushy Buttons Usage)
优质
小牛编辑
125浏览
2023-12-01
Pushy Buttons库是一个小型的CSS Pressable Buttons库。
加载bttn.css
要加载pushy-buttons.min.css库,请从github下载css并将以下行粘贴到网页的“head”部分。
<head>
<b><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>
它将产生以下输出 -