CSSモダンデザインのボタン。 最新のCSSボタンの基本の紹介
私はいくつかのCSSボタンを選択しました。これは私の意見ではWebプロジェクトで使用できるものです。
CSS3ボタンジェネレータ
発電機を見てください SanwebからのCSS3ボタン:
PaciCoフォントのピンクCSS3ボタン
かわいいピンクのボタン（ 音楽を再生し、内部テキストを変更するための小さなjqueryコードとは別に）CSS3に基づいて完全に作成されました。
3Dボタンのコレクション
CSS3を使用して作成された3Dボタンのコレクション：
ソーシャル3Dボタン
優れた ソーシャルボタンアイコンのためのCSS3とフォントで完成しました：
アニメーションCSS3ボタン
背景パターンを持つアニメーションCSSボタン。 Firefox 3.6およびIE10ブラウザでは機能しない可能性があります。
ラウンドアニメーションCSS3ボタン
マウスをホバリングするときのテキストの順番が本当に魅力的な効果を与える別のアニメーションボタン
クリーンサークルボタン
これが循環CSS3ボタンのもう1つの例です。
CSS3スイッチボタン
CSS3とフォントアイコンを使用して作成されたスイッチが完了しました。
アニメーションCSS3ボタン
CSS3およびGoogleフォントを使用して作成されたかわいい3次元ボタン：
CSS3ボタンの効果
これらのボタンは、CSS3のさまざまなプロパティを使用してアニメーションを示しています。
光沢のあるCSS3ボタン
これで、CSS3を使って光沢のあるボタンを簡単に作成できるようにすることができます。
三次元CSS3ボタン
疑似要素CSS3の助けを借りてできることは驚くべきことです。 顕著な3次元ボタンを評価します。
CSS3を切り替えます。
JavaScriptを使用せずにCSS3のスイッチボタンの例：
三次元ロールアップボタンの効果
CSS3によって作成されたボタンが押されたときの3次元旋削の影響：
ブランドボタン
ブートストラップアイコンを使用している人気ブランドの美しいCSSボタン：
ダークラウンドボタン
ボタンを押しながらドロップ効果を与えるために、jQueryを使用した丸いボタン：
CSS3を切り替えます。
CSS3を使用して作成されたスイッチ：
美しいフラットボタン
アニメーションとエフェクトなしで、すべての機会のフラットCSSボタンのコレクション：
ソーシャルネットワークアクセスボタン
ボタンのより魅力的なバージョン 一般アクセスしかし機能なしではありません。 開発者によると、あなたはIE7 +で働く必要があります。
クリスマスボタン
データを使用したクリスマスCSSボタン：URL - 画像を直接ドキュメントに埋め込む方法：
ソフトボタン
CSS3で作成されたラウンド光沢のあるボタン：
ソフトボタンソフトボタン
ボタンUnicode文字のみを使用します。これにより、テキストまたはOUTFLOWSを使用できます。
大きな三次元アニメーションCSS3ボタン
サイト用の3次元アニメーションCSSボタンの別のセット。 アニメーションは、アニメーションとキーフレームのプロパティを使用して行われます。
金属CSS3ボタン
@ font-faceを使用してPICTOSフォントを使用して作成されたメタルCSS3ボタンのコレクション。 金属効果のために、箱の影と線形勾配の特性が含まれていました。
ラウンドCSS3ボタン
CSS3のラウンドアニメーションボタンのもう1つのコレクション：
CSS3ソーシャルネットワークボタンを押して
ボタンは、グラデーション、ボックスシャドウ、テキストシャドウなど、単純なCSS3プロパティを使用します。 "Waiting"と "Active"のステータスもこのセットに含まれています。
単純なCSS3ボタン
美しいCSSボタン：
三次元ダウンロードボタン
この3次元ボタンは、遠近変換を使用します。 WebKitベースのブラウザでのみ機能します。
CSS3ソーシャルネットワークボタンをストレイする
大型ボタン
下部に影の効果があるソリッド光沢のあるCSS3ボタン。 ボタンは、GoogleコレクションからSanSita Oneというフォントを使用します。
シンプルなボタン
いくつか 単純なCSS。 ボタン：
CSS3ボタンソーシャルネットワーク
単純なCSSボタン
複雑なCSSボタンのセット。 それらは設定や使いやすいです。 それらはフォントアワイソームまたはその他のライブラリと簡単に統合できます。
ポーカーチップの形のボタン
ポーカーゲームの形の単純なボタンの例。 ガイダンス効果のあるボタンとしても使用できます。
スライダーボタン
概念 CSSスライダボタン:
管理者メニューボタン
管理者パネル（ メニューまたはナビゲーション）CSS3とFontAwesomeフレームワークを使用する。 ボタンに切り替えるときは、アクティブクラスがjQueryを使用して追加されます。
縫製ボタン
線の単純なボタン、背景画像を使用せずにCSS3機能を説明します。
回転ボタン
マウスカーソルガイダンスのための回転境界を持つ丸いボタン：
CSS3のボタン。
この例に基づいてCSS3によって作成されたソフトボタン
CSS3拡張カード付きのボタン
これらのCSSボタンは、スリーブから滑るカードのように見えます。 ユーザーが選択するまで非表示にする必要がある情報を表示するために使用できます。
CSS3キャンディーの形のアニメーションボタン
ダウンロードステータスを表示するアニメーションボタン
CSS3スイッチ
jQueryを使用してクラスを切り替える美しいスイッチ：
光沢のあるボタン
CSSサイト用の美しいボタンのセットです。 三次元光沢タイプを与えるために様々な特性が使用されます。
まずソースをダウンロードしてボタンのテーマを選択する必要があります。 あなたはあなたが楽しむデザインを取ることができます。 たとえば、Winonaの最初のトピックを取ります。
ダウンロード
このトピックに関する関連記事：
エディタでファイルを開きます index.html. 源泉から、私たちに興味のあるタグがあります。 私の場合：
このコードからクラスで文字列を取得します ボタン。.
タグ間のプロジェクトコードを使用して、ファイル内の必要な場所にコードを挿入します。
.
ボタン名あなたが望むものに変更します。 私の場合は、名前を「開く」に変更します
タグの間でコピーして挿入します プロジェクトのインデックスファイルに。
例から、追加のタイトルのテーマ名の追加クラスを使用して特定のボタンが追加されていることがわかります。
私たちの場合、このクラス ボタンウィノナ。 したがって、Winonaという名前のスタイルが追加されます。
なぜならそれは非常に便利です ボタンの設計を変更したい場合は、タグ内の追加クラスの名前のみを置き換える必要があります。 。 そして、スタイルはすでにファイルに綴られています button.css!
この記事では、ボタンCSSを作成する方法について説明します。 しかし、平らなUIと材料の設計の違いを理解することは、どのコンポーネントを適用する必要があるかわからない場合は意味がありません。 CSSを使用してボタンを作成する基本ですばやくできる可能性があります。
基本CSSボタン
いくつかの「テクニカルではない」標準のボタンがあります。
- 可用性 - 最も重要な重要性です。 障害者と古いブラウザを持つユーザーは、ボタンに簡単にアクセスできます。
- シンプルなテキスト - ボタンを単純で短いテキストに書き込みます。 ユーザーはボタンの目的をすぐに理解する必要があります。
インターネット上のほとんどすべてのボタンは、フレームと影の色の変化に影響を与えます。 これは疑似衝突の助けを借りて行うことができます。 私たちはそれらのうちの2つに集中します:: Hoverと：Active。 疑似クラス：マウスカーソルをカーソルを合わせるときのCSSの動作を担当します。 コード：ユーザーがマウスボタンを押したときにアクティブですが、彼女に行かせなかった。
Pseudoclasssの助けを借りて、あなたは完全に変えることができます 外観 ボタン、しかしこれは不快なアプローチです。 初心者はボタンの基本的なスタイルを編集することをお勧めし、ほとんど完全に外観を保持しています。 この要素の実装では、3つの主な側面 - 色、影、遷移時間を選択できます。
色
CSSボタンを変更して、さまざまなプロパティを使用して色、背景色と境界線を使用して変わります。 まずボタンの色を選択する方法を扱います。
- 花の組み合わせ - 互いに補完する色を使う。 カラーヘクサ。 - 複合色を検索するための素晴らしいツール。
- パレット遵守 - カラーパレットを探しているのなら、に行きます lolcolors。.
影
ボックスシャドウでは、オブジェクトの周囲に影を追加できます。 このアイデアは、フラットUIおよび品目設計で実装されています。 Box-Shadowプロパティの詳細については、読むことができます MDN。.
スムーズな遷移時間
プロパティ遷移期間一時的なフレームワークを追加します CSSの変更 。 スムーズな移行なしのボタンのスタイルは、即座にPseudoclass：Hoverのスタイルに変更され、それはユーザーを怖がらせることができます。 次の例では、ボタンスタイルはスムーズに変化します（0.5秒）：ON：HOSOR：
色変更（境界半径：5px;フォントサイズ：20ピクセル;パディング：14px 80px;カーソル：ポインタ;カラー：#fff;背景色：＃00A6FF; Font-Size： "Roboto"フォント重量：100;境界線：1ピクセルのソリッド#FFF;ボックスシャドウ：2ピックス2px 5px＃AFE9FF;遷移時間：0.5秒; - ウェブキットトランジション期間：0.5秒; ）。順序変更：ホバー（カラー：＃006398;境界：1pxソリッド＃006398; Box-Shadow：2px 2px 20px＃AFE9FF;）
そしてそれはこのように見えます：
例を見る
円滑な遷移のためのコード複合体と古いブラウザはさまざまな方法で異なります。 したがって、古いブラウザのプレフィックスを追加する必要があります。
トランジション期間：0.5S / *通常エントリ、最新のブラウザでの作品* / -webkit-transion-duration：0.5秒。 / * Safari、Chrome、およびAndroidのバージョンのバージョンを支援します。* / -moz-遷移期間。 / * Firefox * /
ボタンスタイルをリセットします
CSSボタンスタイルのデフォルト値を設定してブラウザを作成するには、カスタムスタイルをインストールできます。
button.your-button-class（-webkit-automation：none; -moz-evaple：なし）
これをボタン要素のクラスに適用することをお勧めします。各ボタンは別々にはありません。
3つのスタイルのボタン
1 - 白黒と白
例を見る
そのようなボタンはさまざまなスタイルとよく組み合わされています。 この効果は白黒のコントラストに基づいています。
白い背景を持つ黒いボタンのコードを考えてみましょう。 ボタンを別の色に再描画するには、ボタンを変更します cSSスタイル すべての白と黒の兆候：
Suit_and_tie（ホワイト;フォントサイズ：20ピクセル; Font-Face：Helvetica; Text-Decoration：None;境界線：2pxソリッドホワイト;境界線：20px;遷移期間：遷移期間： .2; - モジド遷移時間：.2s;背景色：黒;パディング：4ピキシメント：4px 30px;）.suit_and_tie：hover（カラー：ブラック;背景色：;遷移時間：.2; -webkit-遷移期間：.2s; - モジド遷移期間：.2s;）
上記のスタイルでは、フォントと背景色のプロパティが遷移期間2Sプロパティでそれらの値を変更していることがわかります。 あなたはあなたのお気に入りのブランドの色を取り、あなた自身のボタンを作成することができます。 ブランドの色が見つかる可能性があります ブランド飾り。.
2-ボタンフラットUI
フラットUIはHTMLボタンCSSのミニマリズムに焦点を当てています - より多くの行動、動きが少なくなります。 通常、私のプロジェクトが形を獲得し始めると、黒と白のボタンからフラットUIへの変わります。 フラットUIボタンは最小限の外観を持ち、ほとんどの設計に適しています。
3D効果を模倣するために動きを加えることで、ボタンを向上させます。
例を見る
私達は最初のボタンを見るでしょう：
ターコイズ（Margin右：10px;幅：100px;背景：＃1abc9c;罫線下：＃16a085 3px。罫線左：＃16a085 1pxソリッド。境界線：6px; text-align：colent;色：白;パディング：10ピクセル; float：左; font-size：12px;フォント重み：800;）.Turquoise：Hover（Opacity：0.8;）.Turquoise：Active（幅：100px; ＃18B495;ボーダーボトム：＃16a085 1ピクス。ボーダー左：＃16a085 1ピクスソリッド。ボーダーラジウス：6ピクセル：6ピクシア：中央;カラー：ホワイト;マージン-top：3px;]] float：左;）
ボタンCSSには3つの状態があります：Normal ,: Hoverと：Active。
：Hoverは、ボタンを少し軽くするために透明度が減少した1行のコードのみを含みますので、明るい色を選択する必要はありません。
ソリッドボーダーフレームを指定する代わりに、ボーダーボトム、ボーダー左、および境界右のプロパティがここで使用されているため、3D深度効果が得られます。
擬似クラス：ActiveはフラットUIボタンでよく使用されます。 私たちのボタンがなると、アクティブになると、2つのことが発生します。
- ：ボーダーボトムは3pxから1pxに変わります。 ボタンの下のシャドウは減少し、ボタンはピクセルのペアになります。 この変更により、ユーザーはボタンを押したと感じます。
- 背景色は暗く、ユーザーから画面へのボタンのオフセットを模倣します。 彼がボタンを押したことをユーザーに思い出させるものもあります。
フラットUIでは、ボタンのミニマルな動きは評価されます。 tell tell 大話 "" 多くの人ボタンのシフトをシミュレートします。 フラットUIでは、まったく動かないボタンがあるが、色を変えるだけであることは注目に値します。
材料設計
材料設計は、さまざまなアニメーションを持つカードの形で情報を送信するというアイデアを促進するデザインへのアプローチです。 ページにリストされています 素材デザインのホームページ。 3つの基本原則：
- 「材料」という単語は比喩です。
- 単調、グラフィック、攻撃性。
- 動きの値を送信します。
これらの原則のうち3つをよりよく理解するために、アクションの素材設計を見てください。
例を見る
これらのCSSボタンは2つの主なアイデアを実装しています - ボックスシャドウとポリマープロパティ。
ポリマー - サイトを作成するためのフレームワーク。 これにより、ボタン上の伝播波の影響は1行のコードだけで追加されます。
さて、材料設計の原則を実装するCSSコードについて話しましょう。
体（背景色：＃F9F9F9;フォント面：RobotoDraft、 "Helvetica Neue";）/ * Button * / .Button（ディスプレイ：インラインブロック;位置：相対;幅：120px; vixe-height ：32px;境界線：2px; font-size：0.9em。背景色：＃646464;マージン：20px 10px;遷移：0.2s;遷移遅延：0 2px 5px 0 RGBA（0,0,0,0.26）;）。）。）。）：アクティブ（Box-Shadow：0 8px 17px 0 RGBA（0,0,0,0.2）;遷移遅延：0S;）/ * misc * / .button.grey（background-color：#ee;）.button.button.button.button.button.button.green（background-color：＃0F9d58; color：#fff;） 。Center（Text-align：Center;）
すべてのボタンCSSはBox-Shadowプロパティを使用します。 CSSコード全体を削除し、ボックスシャドウの機能を参照してください。
ボタン（遷移：0.2S;遷移遅延：0.2S; Box-Shadow：0 2px 5px 0 RGBA（0,0,0.26）;）。）。）。）。）。）。Button：Active（遷移遅延：0S; Box-Shadow：0 8px 17px 0 RGBA（0,0,0,0.2）;）
Box-Shadowプロパティは、ボタンCSSスタイルで使用して、各ボタンの左下に薄い影を追加します。 押されたら、影はわずかに増加して軽くなります。 この動きは3Dシャドウの効果を模倣しています。これは、そのままページからユーザーにジャンプします。 効果は材料設計スタイルとその原理に登録されています。
Vlad Merzehevich
タグを通して作成された標準ボタン
図。 1.ソースと修正ボタン
ボタンのビューを劇的に変更するには、画像を使用できますが、CSS 3の機能と比較してこのオプションはHAMENOWNになっているようです。
基本として、線形の垂直方向の勾配と丸みを帯びたエッジを含むブラウザのオリジナルボタンを取ります。
ボーダーラジアウスプロパティを使用するコーナーの丸めを作るのが最も簡単です。それを希望の半径半径に設定します。 いつものように、それはすべてのブラウザではないので、完全なセットを追加する必要があります。 その結果、以下のことが得られる。
Moz-Border Radius：5px。 / * Firefox * / -WebKit-Border-Radius：5px; / * Safari 4 * /境界線半径：5px; / * IE 9、Safari 5、Chrome * /
ボタンBを表示 別のブラウザ 図1に示す。 2。
図。 2.丸みを帯びた角を持つボタン
一般的に、すべてが期待されています。 IEの旧バージョンはCSS 3をサポートしていません、残りはあなたが正しく必要とする角を行います。 他のブラウザがそうするにつれて、何らかの理由でoperaはデフォルトの背景を表示しませんが、オペラについても特別な会話になります。
今最も興味深い、垂直線形勾配を作ります。 このため、ブラウザごとに個々のスタイルがあります。
背景： - モズ線形勾配（＃00bd6、＃eBFFFF）。
勾配は始点、勾配の角度、初期色、および最終色を示します。 私たちの場合、グラデーションが上から下に垂直になると、色のみを設定するのに十分です。残りのパラメータはデフォルトで使用されます。
Chrome、Safari。
背景： - ウェブキットグラデーション（Linear、0 0,0 100％、（＃00BBD6）、（＃eBFFFF））。
それは、勾配の種類（線形）、勾配アプリケーションの出発点（左上角）、最終点（左下角度）、ならびに初期および最終色を示している。
インターネットエクスプローラ。
filter：progid：dximageTransform.microsoft.gradient（startcolorstr \u003d "＃00bd6"、endcolorstr \u003d "＃ebffff"）;
IEブラウザは独自の方法で、異なる効果のために、グラデーションを含むフィルタプロパティを適用します。 ここですべてが些細なので、グラデーションの最初の色と最終色だけが書き込まれます。
Operaは休んで、勾配はまだ実装されていません。
ブラウザ、コーナー、グラデーションのすべてのプロパティを収集します（例1）。
例1.ボタン 線形グラデーション
それはかなりきれいに切った（図3）があるが、 明示的な違い 最初のボタンから - ボードのように平らに見えます。
図。 3.グラデーションでボタンを表示します
希望の形のボタンをグラデーション、花と遊ぶことができます。 Gradientの2つの値は、もはや幸いなことに、FirefoxとSafariは解決策を提供します。
背景： - モズ線形勾配（＃D0ECF4、＃5BC9E1、＃D0ECF4）。
2つの値の代わりに、所望の数の色を挿入し、勾配は滑らかにある色から別の色に移動します。
Chrome、Safari。
背景： - ウェブキットグラデーション（Linear、0,0,00％、（＃D0ECF4）、（＃D0ECF4）、色停止（0.5、＃5BC9E1））。
カラーストップパラメータは、新しい色のアプリケーションポイントを指定します。 値は0から1まで変化します。
実施例2.勾配が改善されたボタン
HTML 5 CSS 2.1 CSS 3 IE 9 CR OP SA FX
実施例の結果を図4に示す。 四。
図。 4.グラデーション、グラデーションは何ですか
同様に、ボタンまたは他の要素に他の階調を作成することもできます（図5）。 しかし、これはすでにワークショップが追加されたことについてすでにあなた自身で行われています。
図。 5.そのような異なるボタン
私はまとめます。 画像なしで勾配と丸みを帯びた角を持つボタンを作ることができます。 しかし、ブラウザでは、内訳とテントがあります。 Operaは、Gradientsと働く方法、すなわち勾配の組み合わせを伴う不快なバグがある（図6）。
図。 IE 9の角に背景をオーバーレイする
さて、私たちが「美味しさ」をする限り firefoxブラウザ、サファリとクロム。
