ふわっと浮くボタン

ソース

プログラム

＃ふわっと浮くボタン
＃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/
*/

作品について

作品情報

作品を編集

くれあ作

ライセンス: Apache（改変可/著作権継承）
形式: wnako
タグ: -
利用バージョン: 3.2.6
アクセス数(累計): 8
アクセス数(今月): 8
更新日時: 2021/05/01 17:30 編集: 2021/05/02 01:10

⭐

作品公開情報

交流

ふわっと浮くボタン

プログラム

作品情報

コメント