CSS シミュレーションはマテリアル デザイン スタイルのフローティング アクションを実装 button_html/css_WEB-ITnose

作成日: 2016年6月5日 修正日: 2016年6月5日 カテゴリ プログラミングその他 ラベル フロントエンド

マテリアルデザインのフローティング操作ボタンはページコンテンツの一部をブロックしますが、操作ボタンを表現するための良いアイデアを提供します。私は手元に WeChat プロジェクトを持っており、このスタイルを使用して作成タイプの操作を表現してみる準備ができています。マテリアル デザイン ボタンの概要については、ここを参照してください。

ここでは、Gmail アプリの新規メール ボタンと同様のスタイルを実装します。簡単にするために、要素の HTML は次のとおりです。

<div class="float-action-button"></div>

ボタンの配置

フローティング操作ボタンは通常、画面の右下隅に配置されており、Web ページがスクロールしても位置は変わりません。これは、位置を固定に設定し、位置を下と右で指定することで実現できます。カーソル ポインターのスタイルも変更します。

.float-action-button { position: fixed; right: 20px; bottom: 20px; cursor: pointer;}

ボタンの色と形状

ここでの色には 4 つが含まれます。つまり、

• ボタンのメインの背景色
• ボタンの境界線の色
• ボタンの鉛筆アイコンの鉛筆の色
• ボタンの影の色

最初の 2 つの色は似ていますが、メインの色は境界線の色よりわずかに明るくなります。色の選択が難しい場合は、マテリアル デザインの色の推奨テーブルを直接使用するか、フラット デザインの色の推奨 Web サイト 2 つ ( flatuicolorpicker.com 、 flatuicolors.com ) を試してください。 flatuicolorpicker の色を使用しています。

border-radius の値を 50% より大きく設定すると、円形で表示できます。ここでは、パディングを使用してボタンのサイズを設定します。

次のように色と形状を設定します。

.float-action-button { background-color: #D91E18; color: #F2F1EF; border-radius: 50%; padding: 30px;}

ボタンアイコン

に鉛筆アイコンがあります簡単にするために、これを実装するために画像を直接使用します。これまでに見つかった最も豊富なアイコン リソース サイトは、もちろん iconfont で、258 個のアイコンを見つけることができます。ただし、背景色が暗いため、鉛筆を比較的目立つようにするには、色の付いた領域が大きいアイコンを選択するのが最善であることに注意してください。ダウンロードボタンはアイコンにマウスを当てると表示されます。色は背景色に合わせて白またはライトグレーを使用します。ここではiconfontが推奨する#ecf0f1をそのまま使用します。

背景画像は中央に配置され、繰り返されることはありません。サイズはボタン全体の半分のサイズです。背景サイズをパディング値に設定するだけです。

.float-action-button { background-image: url('./pencil.png'); background-repeat: no-repeat; background-position: center; background-size: 30px;}

ボタンの枠

ボタンには非常に細い枠があり、色は背景色よりわずかに濃いです。設定に境界線を使用します:

.float-action-button { border: 1px solid #CF000F;}

ボタンの影

CSS シャドウには text-shadow と box-shadow の 2 つがあります。前者はテキストの影を指定するために、ここでは box-shadow が使用されます。その一般的な値は、x 軸オフセット、y 軸オフセット、ぼかし半径、発散半径、影の色の 5 つです。フローティング アクション ボタンには、y 軸のオフセットのみがあります。そして色はとても明るいです。

.float-action-button { box-shadow: 0px 3px 9px 2px #BFBFBF;}

ホバースタイル

マウスが上を通過してクリックしたとき、ボタンを押す効果をテンプレート化するには、背景を直接変更するだけです次のように、色を変更し、影の y 軸オフセットを増やします:

.float-action-button:hover { background-color: #F22613; box-shadow: 0px 6px 9px 2px #BFBFBF;}

最終効果

デモを参照してください。