CSSボタン-btns.cssの使用法

btns.cssボタンライブラリは、スムーズな遷移を利用するCSSボタンのセットです。

bttn.cssを読み込んでいます

btns.cssライブラリをロードするには、リンクbtns.cssに移動し、Webページの<head>セクションに次の行を貼り付けます。

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

ボタンの使用

htmlボタンタグを使用してボタンを作成し、サイズ指定子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>

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

スタイルの定義

サイズや色と同じように、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>

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