🌸 「なでしこ3」
>
🍯 「貯蔵庫」
ふわっと浮くボタン
🌟新規
📒一覧
🔌ライブラリ
🔍
🚪ログイン
ふわっと浮くボタン 📖
ふわっと浮いているボタンです。押すと沈みます。
プログラム:
(→大)
#ふわっと浮くボタン #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
作成日時:
2021/05/01 17:30 (編集: 2023/05/07 23:55)
公開の投稿
⭐
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
通報数:
0
通報って何?