CSSボタン-クイックガイド

Webページのボタンは、ユーザーが必要な入力を選択または入力した後にクリックし、詳細を送信して必要な情報を取得する主要なアクターです。このチュートリアルでは、ボタンを素晴らしいものにするための10の主要なCSSライブラリに焦点を当てています。

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

  • Pushy Buttons − Pushy Buttonsライブラリは、小さなCSS PressableButtonsライブラリです。

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

  • Social Buttons − Social Buttonsライブラリは、純粋なCSSで作成されたCSSボタンのセットであり、BootstrapとFontAwesomeに基づいています。

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

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

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

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

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

以下は、bttn.cssで利用可能なさまざまなスタイルです。

シニア番号 スタイル ミディアムサイズ 原色 デモ
1 bttn-slant bttn-md bttn-プライマリ
2 bttn-団結 bttn-md bttn-プライマリ
3 bttn-ピル bttn-md bttn-プライマリ
4 bttn-float bttn-md bttn-プライマリ
5 bttn-material-flat bttn-md bttn-プライマリ
6 bttn-material-circle bttn-md bttn-プライマリ
7 bttn-fill-circle bttn-md bttn-プライマリ
8 bttn-gradient bttn-md bttn-プライマリ
9 bttn-jelly bttn-md bttn-プライマリ
10 bttn-ストレッチ bttn-md bttn-プライマリ
11 bttn-最小 bttn-md bttn-プライマリ
12 bttn-bordered bttn-md bttn-プライマリ
13 bttn-シンプル bttn-md bttn-プライマリ

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

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

pushy-buttons.min.cssライブラリを読み込むには、githubからcssをダウンロードし、ウェブページの<head>セクションに次の行を貼り付けます。

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

ボタンの使用

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

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

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>

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

Social Buttonsライブラリは、純粋なCSSで作成されたCSSボタンのセットであり、BootstrapとFontAwesomeに基づいています。

ソーシャルボタンの読み込み

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

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

ボタンの使用

htmlアンカータグを使用してボタンを作成し、ソーシャル指定子btn-socialを使用してスタイルbtn、btn-blockを追加します。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitterでログイン

サイズの定義

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

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

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

Twitterでログイン Twitterでログイン Twitterでログイン Twitterでログイン

アイコンのみを使用する

次の例は、アイコンのみのボタンを選択する方法を示しています。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

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

以下は、ソーシャルボタンで使用できるさまざまなスタイルです。

シニア番号 スタイル ミディアムサイズ ボタン アイコンボタン
1 btn-twitter btn-md Twitterでログイン
2 btn-bitbucket btn-md Bitbucketでログイン
3 btn-dropbox btn-md Dropboxでログイン
4 btn-facebook btn-md Facebookでログイン
5 btn-btn-flickr btn-md Flickrでログイン
6 btn-btn-foursquare btn-md Foursquareでログイン
7 btn-btn-github btn-md Githubでログイン
8 btn-btn-google btn-md Googleでログイン
9 btn-btn-instagram btn-md Instagramでログイン
10 btn-btn-linkedin btn-md Linkedinでログイン
11 btn-btn-microsoft btn-md Microsoftでログイン
12 btn-btn-odnoklassniki btn-md Odnoklassnikiでログイン
13 btn-btn-openid btn-md Openidでログイン
14 btn-btn-pinterest btn-md Pinterestでログイン
15 btn-btn-reddit btn-md Redditでログイン
16 btn-btn-soundcloud btn-md Soundcloudでログイン
17 btn-btn-tumblr btn-md Tumblrでログイン
18 btn-btn-twitter btn-md Twitterでログイン
19 btn-btn-vimeo btn-md Vimeoでログイン
20 btn-btn-vk btn-md Vkでログイン
21 btn-btn-yahoo btn-md Yahooでログイン

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>

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









フォントサイズの定義

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

<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 段落で。