Css-buttons-pushybuttons
提供：Dev Guides
CSSボタン-プッシュボタンの使用
Pushy Buttonsライブラリは、小さなCSS Pressable Buttonsライブラリです。
bttn.cssの読み込み
pushy-buttons.min.cssライブラリをロードするには、https://github.com/iRaul/pushy-buttons/tree/master/css [github]からcssをダウンロードし、次の行を<head>セクションに貼り付けますウェブページ。
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>ボタンを使用する
html buttonタグを使用してボタンを作成し、サイズ指定子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>それは次の出力を生成します-
提出する
サイズの定義
以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名とともに使用することで、ボタンのサイズを拡大または縮小できます。 この例では、4つのサイズが変更されています。
<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>それは次の出力を生成します-
大
普通
中
小さい
色の定義
サイズと同様に、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>それは次の出力を生成します-
大
普通
中
