スマホアプリでよく見かける「新規作成」「加える」という意味のボタンを、見よう見まねですが作成したのでメモ。

「新規作成」「加える」ボタンの表示結果

ボタンの特徴詳細

赤い丸に「+」のデザイン、影付き
影は半透明、下の要素もばっちり見えるので邪魔にならない
ボタンが他の要素より上に重なるように表示（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);
    }