ふわっと浮くボタン 📖

ふわっと浮いているボタンです。押すと沈みます。

プログラム: (→大)
＃ふわっと浮くボタン ＃2021/05/01 ＃ボタンの設定 ボタン影設定に「0px 8px 8px 0px {銀色}」を代入します。 ボタン詳細設定に｛文字サイズ：「12px」、背景色：白色、余白：「8px 20px」/*(縦px 横px)*/、/*太字*/「font-weight」:「bold」、/*角の丸み*/「border-radius」：「100vh」、/*影*/「box-shadow」：ボタン影設定、/*枠線の太さ*/「border-width」：/*細い*/「thin」、/*枠線の色*/「border-color」：銀色｝を代入します。 ボタンもどし設定に｛/*影*/「box-shadow」:ボタン影設定、背景色：白色｝を代入します。 ＃ボタンの設定：押した後 /*薄い灰色をつくる*/濃さに「{255×0.95}」を代入して薄い灰色に「rgba({濃さ},{濃さ},{濃さ},0.5)」を代入します。 /*影をしぼる*/ボタン押し設定に｛「box-shadow」:「0px 2px 4px 0px {銀色}」、背景色：薄い灰色｝を代入します。 ＃ボタンの作成と動作設定 /*ボタンを作成する*/ボタンに/*表示名*/「ボタン」のボタン作成を代入して、ボタンにボタン詳細設定をDOMスタイル一括設定します。 ＃クリック ボタンをマウス押した時には 　ボタンにボタン押し設定をDOMスタイル一括設定します。 ボタンをマウス離した時には 　ボタンにボタンもどし設定をDOMスタイル一括設定してここまで。 ＃タッチ ボタンをタッチ開始した時には 　ボタンにボタン押し設定をDOMスタイル一括設定します。 ボタンをタッチ終了した時には 　ボタンにボタンもどし設定をDOMスタイル一括設定してここまで。 /*関連項目 ・Material Components for the web 　https://material.io/develop/web 　https://material-components.github.io/material-components-web-catalog/#/ ・コピペでデザイン！簡単マテリアルデザイン風コードまとめ 　https://webdesign-trends.net/entry/152 ・【CSS】マテリアルデザイン風ボタン 　https://rabico.dev/how-to-create-button-of-material-design/ */