cssを使って画面右下に投稿ボタンを作成する

やりたい事

・twitterのios版みたいに画面右下に投稿ボタンを作成する
・投稿ボタン全体をクリックできるようにする

完成図

今回作ったのは右下の空色のボタン

投稿ボタン(div)全体をクリックできるようにする

show.html.erb

<a href="/">
  <div class="post-btn">
    <i class="fas fa-plus"></i>
  </div>
</a>

やり方を調べたらdiv全体をaタグで囲めばいいとあって驚きました。
ちょっと違和感がありますがちゃんと動いてるし実装も簡単なのでこれで良しとします。

ボタンを所定の位置に固定する

application.scss

/* 投稿ボタン */

.post-btn {
  position: fixed;
  bottom: 10%;
  right: 25%;
  width: 70px;
  height: 70px;
  line-height:70px;
  color:white;
  font-weight: bold;
  font-size: 30px;
  background: aqua;
  border-radius: 50%;
  text-align: center;
}

position: fixed;
bottom: 10%;
right: 25%;
により要素を下から10%、右から25%の位置に固定

line-heightとheightを同じ値にすることによってボタン内の文字(+)をちょうど真ん中の高さに持っていく事ができます。