CSSボタン-Beautonsの使用法

Beautonsボタンライブラリは、ボタンを作成するためのシンプルなCSSツールキットです。スタイルとサイズの組み合わせを適用して、一貫性のある堅牢で堅牢なボタンの膨大なセットを作成できます。

Beautonsの読み込み

Beautonsライブラリをロードするには、githubからcssをダウンロードし、Webページの<head>セクションに次の行を貼り付けます。

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

ボタンの使用

htmlボタンタグを使用してボタンを作成し、スタイル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>

次の出力が生成されます-

フォントサイズの定義

<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>

次の出力が生成されます-

機能ボタンの定義

次の例は、さまざまな機能ボタンを示しています。

<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>

次の出力が生成されます-

スタイルを組み合わせる

次の例は、ボタンのスタイルを組み合わせる方法を示しています。

<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>

次の出力が生成されます-

A 段落で。