スマホアプリでよく見かける「新規作成」「加える」という意味のボタンを、見よう見まねですが作成したのでメモ。
「新規作成」「加える」ボタンの表示結果
ボタンの特徴詳細
- 赤い丸に「+」のデザイン、影付き
- 影は半透明、下の要素もばっちり見えるので邪魔にならない
- ボタンが他の要素より上に重なるように表示(z-indexの値は適当)
- 画面がスクロールしてもボタンは常に同じ位置に表示
- 画面の右下隅にボタンを表示(位置は結構適当)
ボタンのソースコード / HTML+CSS
各プロパティの値は多少微調整が必要ですが、これで次回からコピペで作れるハズ!
HTML
<div id="add_button">+</div>
CSS
div#add_button {
font-size: 21px;
line-height: 55px;
text-align: center;
color: white;
background-color: red;
width: 55px;
height: 55px;
position:fixed;
top:485px;
left:280px;
border-radius: 50%;
z-index: 10;
box-shadow:0px 3px 10px rgba(0,0,0, 0.3);
-webkit-box-shadow: 0px 3px 10px rgba(0,0,0, 0.3);
}