CSS3チュートリアルなめらかなオン/オフボタンを作成する
ボタンを使用することは、これまでのところ、電子的なものと対話するための好ましい方法です。ラジオ、テレビ、音楽プレーヤー、さらには音声コマンド機能を備えたスマートフォンでさえも、少なくとも1つまたは2つの物理ボタンが必要です。.
さらに、このデジタル時代では、 ボタン デジタル形式でも進化しているため、物理的なボタンと比較して、よりインタラクティブでダイナミック、そして作りやすくなっています。.
そのため、今回は、この優れたデザインを基にした滑らかでインタラクティブなボタンをDribbbleでCSSのみを使用して作成します。.
それでは始めましょう.
HTML
HTMLドキュメントに次のマークアップを配置して、ボタンから始めます。それは本当に簡単です、ボタンはアンカータグに基づいているでしょう、私たちも持っています スパン その隣にインジケータライトを作成してから、それらをHTML 5内にまとめて表示します。 セクション タグ.
＆＃xF011;
これが私たちのボタンが最初にどのように見えるかです。.
基本スタイリング
このセクションでは、 スタイル.
私たちは最初に微妙なパターンからのこの暗い背景をボディのドキュメントに適用して、中央に配置します。 セクション. それから、私達はまた点線を取除きます アウトライン に ：フォーカス そして ：アクティブ リンク.
body background：url（ 'images / micro_carbon.png'）;セクションmargin：150px auto 0;幅：75ピクセル。高さ：95ピクセル。位置：相対; text-align：center。 ：active、：focus outline：0;;
カスタムフォントの使用
ボタンのアイコンには、画像ではなくFont Awesomeのカスタムフォントを使用します。そのようにしてアイコンはスタイルシートを通して簡単にスタイル可能でスケール可能になります.
フォントをダウンロードし、フォントファイル（eot、woff、ttf、svg）を フォント フォルダを選択し、スタイルシートに次のコードを追加して新しいフォントファミリを定義します。.
@ font-face font-family： "FontAwesome"; src：url（ "fonts / fontawesome-webfont.eot"）; src：url（ "fonts / fontawesome-webfont.eot？#iefix"）フォーマット（ 'eot'）、url（ "fonts / fontawesome-webfont.woff"）フォーマット（ 'woff'）、url（ "fonts / fontawesome- webfont.ttf "）format（ 'truetype'）、url（" fonts / fontawesome-webfont.svg＃FontAwesome "）format（ 'svg'）;フォントの太さ：普通。フォントスタイル：普通。
の 電源アイコン このボタンに必要なのはUnicode番号で表されています F011;上記のHTMLマークアップをよく見ると、この数字が使われています。 ＆＃xF011; アンカータグ内で、しかし我々はカスタムを定義していないので フォントファミリー ボタンスタイルでは、アイコンはまだ正しくレンダリングされていません。.
参考文献： UnicodeとHTML：ドキュメントの文字
ボタンのスタイル
まず最初に、カスタムを定義する必要があります。 フォントファミリー ボタン用.
ボタンは円になります。 ボーダー半径 プロパティを設定し、少なくともボタンの半分の値に値を設定します。 幅.
アイコンにフォントを使用しているので、簡単に設定できます。 色 そして追加 テキスト影 スタイルシートのアイコンにも.
次に、ボタン用の傾斜効果も作成します。この効果はかなりトリッキーです。まず、申請する必要があります 背景色：rgb（83,87,93）。 ボタンのカラーベースについては、最大4つのレイヤーを追加します。 箱影.
font-family： "FontAwesome";カラー：rgb（37、37、37）。 text-shadow：0ピクセル1ピクセル1ピクセルrgba（250、250、250、0.1）。フォントサイズ：32pt。表示ブロック;位置：相対;テキスト装飾：なし。背景色：rgb（83,87,93）。 box-shadow：0px 3px 0px 0px rgb（34,34,34）、/ * 1番目の影* / 0px 7px 10px 0px rgb（17,17,17）、/ * 1番目の影* /インセット0px 1px 1px 0px rgba（250） 、２５０、２５０、．． ２）、／ ＊第３シャドー＊ ／インセット０ｐｘ − １２ｐｘ ３５ｐｘ ０ｐｘ ｒｇｂａ（０、０、０、．５）。 / * 4th Shadow * /幅：70ピクセル。高さ：70ピクセル。ボーダー：0。ボーダー半径：35ピクセル。 text-align：center。行の高さ：79ピクセル。
ボタンの外側に大きな円もあります。 ：前 疑似要素 余分なマークアップを追加するよりもむしろそれのために.
a：content： ""の前幅：80ピクセル。高さ：80ピクセル。表示ブロック; ｚ指数：−２。位置：絶対背景色：rgb（26、27、29）。左：-5px。上：−２ｐｘ。ボーダー半径：40ピクセル。ボックスシャドウ：0px 1px 0px 0px rgba（250、250、250、0.1）、インセット0px 1px 2px rgba（0、0、0、0.5）。
参考文献： CSS：前と後： 疑似要素 （Hongkiat.com）
インジケータライト
ボタンの下には、電源のオンとオフの状態を示す小さなランプがあります。以下では、電源が最初オフになっているため、ライトの色に赤を適用します。 ボックスシャドウ 光のきらめき効果を模倣する.
a + span display：block;幅：8ピクセル。高さ：8ピクセル。背景色：rgb（226,0,0）;ボックス影：インセット0px 1px 0px 0px rgba（250,250,250,0.5）、0px 0px 3px 2px rgba（226,0,0,0.5） border-radius：4ピクセル。クリア：両方位置：絶対下：0;左：42％。
の効果
この時点で私たちのボタンは見栄えがよくなり、私たちはそれにいくつかの効果を追加する必要があるだけです、例えばボタンがクリックされているとき、私たちはボタンが押され押されているように見せたいです.
効果を達成するために、最初の ボックスシャドウ ボタンの位置がゼロになり、位置が少し下がります。ボタンの位置に合わせて、他の3つの影の強度も少し調整する必要があります。.
a：アクティブbox-shadow：0px 0px 0px 0px rgb（34,34,34）、/ * 1st Shadow * / 0px 3px 7px 0px rgb（17,17,17）、/ * 2nd Shadow * /インセット0px 1px 1px 0px rgba（250、250、250、2）、/ * 3rd Shadow * /インセット0px-10px 35px 5px rgba（0、0、0、.5）。 / * 4th Shadow * /背景色：rgb（83,87,93）;トップ：3px。
さらに、ボタンをクリックした後は、ボタンを押したままにし、アイコンが「輝いて」電源がオンになっていることを示します。.
そのような効果を達成するために、私たちはボタンを使ってボタンをターゲットにします。 ：ターゲット 疑似クラス, それからアイコンの色を白に変えて テキスト影 白い色とまた.
a：target box-shadow：0px 0px 0px 0px rgb（34,34,34）、0px 3px 7px 0px rgb（17,17,17）、インセット0px 1px 1px 0px rgba（250、250、250、.2） 、インセット０ｐｘ − １０ｐｘ ３５ｐｘ ５ｐｘ ｒｇｂａ（０、０、０、．５）。背景色：rgb（83、87、93）。トップ：3px。色：#fff; text-shadow：0ピクセルx 0ピクセルx 3ピクセルrgb（250,250,250）。
参考文献： ：targetを使う 疑似クラス
私達はまた調節する必要があります ボックスシャドウ 次のように、ボタンの外側の円の中に.
a：アクティブ：前、a：ターゲット：前top：-5px;背景色：rgb（26、27、29）。ボックスシャドウ：0px 1px 0px 0px rgba（250、250、250、0.1）、インセット0px 1px 2px rgba（0、0、0、0.5）。
ライトインジケータがデフォルトの赤から緑に変わり、電源がすでに入っていることを強調します。.
ａ：ｔａｒｇｅｔ ＋ ｓｐａｎ ｛箱影：インセット０ｐｘ １ｐｘ ０ｐｘ ０ｐｘ ｒｇｂａ（２５０，２５０，２５０，０．５）、０ｐｘ ０ｐｘ ３ｐｘ ２ｐｘ ｒｇｂａ（１３５，１８７，８３，０．５）； ａ。背景色：rgb（135、187、83）。
トランジション効果
最後に、ボタンの効果をスムーズに実行するために、次のトランジション効果も適用します。.
以下のこのスニペットは、具体的に 色 財産と テキスト影 にとって 350ms アンカー要素内.
トランジション：カラー３５０ｍｓ、テキストシャドウ３５０ｍｓ。トランジション：カラー350ミリ秒、テキストシャドウ350ミリ秒。 -moz-transition：カラー350ミリ秒、テキストシャドウ350ミリ秒。 -webkit-transition：カラー350ミリ秒、テキストシャドウ350ミリ秒。
以下のこの2番目のスニペットは、 背景色 そして ボックスシャドウ 光インジケータのプロパティ.
a：target + span 遷移：背景色350ミリ秒、ボックス影700ミリ秒;トランジション：背景色350ミリ秒、ボックスシャドウ700ミリ秒。 -moz-transition：背景色350ミリ秒、ボックスシャドウ700ミリ秒。 -webkit-transition：背景色350ミリ秒、ボックスシャドウ700ミリ秒。
最終結果
私たちは必要なすべてのスタイルを完成させました。これで最終結果がライブで表示されるだけでなく、下のリンクからソースファイルをダウンロードすることもできます。.
- デモ
- ソースをダウンロード
ボーナス：それをオフにする方法
これがボーナスです。上記のデモのボタンを試したことがある場合は、ボタンは1回しかクリックできないことに気付いたことになります。?.
あいにく、私たちはjQueryを使ってそれをしなければなりません、しかしそれも本当に簡単です。以下は、必要なすべてのjQueryコードです。.
$（document）.ready（function（）$（ '＃button'）。click（function（）$（this）.toggleClass（ 'on'）;）;）;
上記のスニペットはアンカーにクラスONを追加します、そして我々は toggleClass それを追加するためにjQueryからの関数。だから、ときに ＃ボタン クリックされると、jQueryはクラスONが追加されたかどうかをチェックします。そうでない場合、jQueryはクラスを追加し、追加されていれば、jQueryはクラスを削除します。.
注意： jQueryライブラリを含めることを忘れないでください.
今スタイルを少し変更する必要があります。単にすべてを交換してください ：ターゲット 疑似要素 とともに .に 次のようなクラスセレクタ
a.on box-shadow：0px 0px 0px 0px rgb（34,34,34）、0px 3px 7px 0px rgb（17,17,17）、インセット0px 1px 1px 0px rgba（250、250、250、.2） 、インセット０ｐｘ − １０ｐｘ ３５ｐｘ ５ｐｘ ｒｇｂａ（０、０、０、．５）。背景色：rgb（83,87,93）。トップ：3px。色：#fff; text-shadow：0ピクセルx 0ピクセルx 3ピクセルrgb（250,250,250）。 a：アクティブ：前、a.on：前top：-5px;。背景色：rgb（26、27、29）。ボックスシャドウ：0px 1px 0px 0px rgba（250、250、250、0.1）、インセット0px 1px 2px rgba（0、0、0、0.5）。 ａ ＋ｏｎ ＋スパン｛箱影：インセット０ｐｘ １ｐｘ ０ｐｘ ０ｐｘ ｒｇｂａ（２５０，２５０，２５０，０．５）、０ｐｘ ０ｐｘ ３ｐｘ ２ｐｘ ｒｇｂａ（１３５，１８７，８３，０．５）； ａ。背景色：rgb（135、187、83）。
最後に、ブラウザで試してみましょう.
- デモ
- ソースをダウンロード
