Css-buttons-beautons
提供：Dev Guides
CSSボタン-Beautonsの使用法
Beautonsボタンライブラリは、ボタンを作成するためのシンプルなCSSツールキットです。 スタイル、サイズの組み合わせを適用して、一貫性のある堅牢で堅牢なボタンの巨大なセットを作成できます。
ビュートンのロード
Beautonsライブラリをロードするには、https://github.com/csswizardry/beautons/blob/master/beautons.min.css [github]からcssをダウンロードし、Webページの<head>セクションに次の行を貼り付けます。
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>ボタンを使用する
html buttonタグを使用してボタンを作成し、スタイルbtnを追加します。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<Submit</button>
</body>
</html>それは次の出力を生成します-
提出する
サイズの定義
以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名とともに使用することで、ボタンのサイズを拡大または縮小できます。 この例では、4つのサイズが変更されています。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--small">Small</button> <br/> <br/>
<button class = "btn btn--large btn-blue">Large</button><br/><br/>
<button class = "btn btn--huge">Huge</button><br/><br/>
<button class = "btn btn--full">Full</button><br/><br/>
</body>
</html>それは次の出力を生成します-
小さい
大
Huge
Full
フォントサイズの定義
以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名とともに使用することで、ボタンのサイズを拡大または縮小できます。 この例では、4つのサイズが変更されています。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--alpha">Huge</button><br/><br/>
<button class = "btn btn--beta">Large</button><br/><br/>
<button class = "btn btn--gamma">Regular</button><br/><br/>
</body>
</html>それは次の出力を生成します-
Huge
大
レギュラー
機能ボタンの定義
次の例は、さまざまな機能ボタンを示しています。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--positive">Positive</button> <br/> <br/>
<button class = "btn btn--negative">Negative</button><br/><br/>
<button class = "btn btn--inactive">Disabled</button><br/><br/>
<button class = "btn btn--soft">Rounded</button><br/><br/>
<button class = "btn btn--hard">Hard</button><br/><br/>
</body>
</html>それは次の出力を生成します-
ポジティブ
負
無効
丸みを帯びた
Hard
スタイルを組み合わせる
次の例は、ボタンのスタイルを組み合わせる方法を示しています。
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--large btn--positive">Button</button> <br/><br/>
<button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
<button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
<p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/>
</body>
</html>それは次の出力を生成します-
ボタン
ボタン
ボタン
段落内のボタン。
