Css-buttons-btnscss
提供：Dev Guides
CSSボタン-btns.cssの使用法
btns.cssボタンライブラリは、スムーズな移行を利用するCSSボタンのセットです。
bttn.cssの読み込み
btns.cssライブラリをロードするには、リンクlink：/css_buttons/btns.css [btns.css]に移動し、Webページの<head>セクションに次の行を貼り付けます。
<head>
<link rel = "stylesheet" href = "btns.css">
</head>ボタンを使用する
html buttonタグを使用してボタンを作成し、サイズ指定子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>それは次の出力を生成します-
提出する
サイズの定義
以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名とともに使用することで、ボタンのサイズを拡大または縮小できます。 この例では、4つのサイズが変更されています。
<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>それは次の出力を生成します-
大
小さい
色の定義
サイズと同様に、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>それは次の出力を生成します-
Red
Blue
緑
Sea
黄
オレンジ
紫の
ブラック
雲
Grey
スタイルを定義する
サイズ、色と同様に、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>それは次の出力を生成します-
レギュラー
円形
上げた
小さい
概説
