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>

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

サイズの定義

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

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

サイズの定義

<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でログイン

サイズの定義

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

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

サイズの定義

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