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

bttn.cssライブラリは、ボタンのシンプルなスタイルの膨大なコレクションを提供します。このライブラリは、個人および商用の両方で完全に無料です。これらのボタンは簡単にカスタマイズできます。

bttn.cssの読み込み

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

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

ボタンを使用する

html buttonタグを使用してボタンを作成し、サイズ指定子bttn-lgを使用してスタイルbttn-slant、bttn-royalを追加します。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>

   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

それは次の出力を生成します-

提出する

サイズの定義

以下に示すように、CSSを使用してボタンのサイズを定義し、クラス名とともに使用することで、ボタンのサイズを拡大または縮小できます。この例では、4つのサイズが変更されています。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>

   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

それは次の出力を生成します-

大

中

小さい

極小

色の定義

サイズと同様に、CSSを使用してボタンの色を定義できます。次の例は、ボタンの色を変更する方法を示しています。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>

   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

それは次の出力を生成します-

一次

警告

危険

成功

ロイヤル

Css-buttons-bttnscss

目次

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

bttn.cssの読み込み

ボタンを使用する

サイズの定義

色の定義