CSSボタン-概要

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

bttn.css -bttn.cssライブラリは、ボタンのシンプルなスタイルの膨大なコレクションを提供します。このライブラリは、個人および商用の両方で完全に無料です。これらのボタンは簡単にカスタマイズできます。
Pushy Buttons -Pushy Buttonsライブラリーは、CSS Pressable Buttonsの小さなライブラリーです。
btns.css -btns.cssボタンライブラリは、スムーズな移行を利用するCSSボタンのセットです。
ソーシャルボタン-ソーシャルボタンライブラリは、純粋なCSSで作成されたCSSボタンのセットであり、BootstrapおよびFont Awesomeに基づいています。
Beautons -Beautonsボタンライブラリは、ボタンを作成するためのシンプルなCSSツールキットです。スタイル、サイズの組み合わせを適用して、一貫性のある堅牢で堅牢なボタンの巨大なセットを作成できます。

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ボタン-bttn.css使用可能なスタイル

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

Sr. No.	Style	Medium Size	Primary Color	Demo
1	bttn-slant	bttn-md	bttn-primary	Medium
2	bttn-unite	bttn-md	bttn-primary	Medium
3	bttn-pill	bttn-md	bttn-primary	Medium
4	bttn-float	bttn-md	bttn-primary	Medium
5	bttn-material-flat	bttn-md	bttn-primary	Medium
6	bttn-material-circle	bttn-md	bttn-primary	M
7	bttn-fill-circle	bttn-md	bttn-primary	Medium
8	bttn-gradient	bttn-md	bttn-primary	Medium
9	bttn-jelly	bttn-md	bttn-primary	Medium
10	bttn-stretch	bttn-md	bttn-primary	Medium
11	bttn-minimal	bttn-md	bttn-primary	Medium
12	bttn-bordered	bttn-md	bttn-primary	Medium
13	bttn-simple	bttn-md	bttn-primary	Medium

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ボタン-btns.cssの使用法

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

bttn.cssの読み込み

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

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

ボタンを使用する

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

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

Red

Blue

緑

Sea

黄

オレンジ

紫の

ブラック

雲

Grey

スタイルを定義する

サイズ、色と同様に、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>

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

レギュラー

円形

上げた

小さい

概説

CSSボタン-ソーシャルボタンの使用

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

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

bootstrap-social.cssライブラリをロードするには、https://github.com/lipis/bootstrap-social [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>

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

[.fa .fa-twitter]##Login with 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>

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

Login with Twitter# [.fa .fa-twitter]Login with Twitter [.fa .fa-twitter]</emphasis>Login with Twitter [.fa .fa-twitter]</emphasis>#Login with 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>

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

[.fa .fa-twitter]##

CSSボタン-利用可能なソーシャルボタンのスタイル

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

Sr.No.	Style	Medium Size	Button	Icon Button
1	btn-twitter	btn-md	[.fa .fa-twitter]##Login with Twitter	[.fa .fa-twitter]##
2	btn-bitbucket	btn-md	[.fa .fa-bitbucket]##Login with Bitbucket	[.fa .fa-bitbucket]##
3	btn-dropbox	btn-md	[.fa .fa-dropbox]##Login with Dropbox	[.fa .fa-dropbox]##
4	btn-facebook	btn-md	[.fa .fa-facebook]##Login with Facebook	[.fa .fa-facebook]##
5	btn-btn-flickr	btn-md	[.fa .fa-flickr]##Login with Flickr	[.fa .fa-flickr]##
6	btn-btn-foursquare	btn-md	[.fa .fa-foursquare]##Login with Foursquare	[.fa .fa-foursquare]##
7	btn-btn-github	btn-md	[.fa .fa-github]##Login with Github	[.fa .fa-github]##
8	btn-btn-google	btn-md	[.fa .fa-google]##Login with Google	[.fa .fa-google]##
9	btn-btn-instagram	btn-md	[.fa .fa-instagram]##Login with Instagram	[.fa .fa-instagram]##
10	btn-btn-linkedin	btn-md	[.fa .fa-linkedin]##Login with Linkedin	[.fa .fa-linkedin]##
11	btn-btn-microsoft	btn-md	[.fa .fa-windows]##Login with Microsoft	[.fa .fa-windows]##
12	btn-btn-odnoklassniki	btn-md	[.fa .fa-odnoklassniki]##Login with Odnoklassniki	[.fa .fa-odnoklassniki]##
13	btn-btn-openid	btn-md	[.fa .fa-openid]##Login with Openid	[.fa .fa-openid]##
14	btn-btn-pinterest	btn-md	[.fa .fa-pinterest]##Login with Pinterest	[.fa .fa-pinterest]##
15	btn-btn-reddit	btn-md	[.fa .fa-reddit]##Login with Reddit	[.fa .fa-reddit]##
16	btn-btn-soundcloud	btn-md	[.fa .fa-soundcloud]##Login with Soundcloud	[.fa .fa-soundcloud]##
17	btn-btn-tumblr	btn-md	[.fa .fa-tumblr]##Login with Tumblr	[.fa .fa-tumblr]##
18	btn-btn-twitter	btn-md	[.fa .fa-twitter]##Login with Twitter	[.fa .fa-twitter]##
19	btn-btn-vimeo	btn-md	[.fa .fa-vimeo-square]##Login with Vimeo	[.fa .fa-vimeo-square]##
20	btn-btn-vk	btn-md	[.fa .fa-vk]##Login with Vk	[.fa .fa-vk]##
21	btn-btn-yahoo	btn-md	[.fa .fa-yahoo]##Login with Yahoo	[.fa .fa-yahoo]##

CSSボタン-Beautonsの使用法

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

ビュートンのロード

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

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

ボタンを使用する

html buttonタグを使用してボタンを作成し、スタイル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>

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

小さい

大

Huge

Full

フォントサイズの定義

以下に示すように、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>

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

Huge

大

レギュラー

機能ボタンの定義

次の例は、さまざまな機能ボタンを示しています。

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

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

ポジティブ

負

無効

丸みを帯びた

Hard

スタイルを組み合わせる

次の例は、ボタンのスタイルを組み合わせる方法を示しています。

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

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

ボタン

段落内のボタン。

Css-buttons-quick-guide

目次

CSSボタン-概要

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

bttn.cssの読み込み

ボタンを使用する

サイズの定義

色の定義

CSSボタン-bttn.css使用可能なスタイル

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

bttn.cssの読み込み

ボタンを使用する

サイズの定義

色の定義

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

bttn.cssの読み込み

ボタンを使用する

サイズの定義

色の定義

スタイルを定義する

CSSボタン-ソーシャルボタンの使用

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

ボタンを使用する

サイズの定義

アイコンのみを使用する

CSSボタン-利用可能なソーシャルボタンのスタイル

CSSボタン-Beautonsの使用法

ビュートンのロード

ボタンを使用する

サイズの定義

フォントサイズの定義

機能ボタンの定義

スタイルを組み合わせる