CSSボタン-プッシュボタンの使用

Pushy Buttonsライブラリは、小さなCSS Pressable Buttonsライブラリです。

bttn.cssの読み込み

pushy-buttons.min.cssライブラリをロードするには、https://github.com/iRaul/pushy-buttons/tree/master/css [github]からcssをダウンロードし、次の行を<head>セクションに貼り付けますウェブページ。

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

ボタンを使用する

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>

   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

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

提出する

サイズの定義

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>

   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

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

大

普通

中

小さい

色の定義

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

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>

   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

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

大

普通

中

Css-buttons-pushybuttons

CSSボタン-プッシュボタンの使用

bttn.cssの読み込み

ボタンを使用する

サイズの定義

色の定義

目次