css를 사용하여 화면 오른쪽 하단에 게시 버튼 만들기

하고 싶은 일

· 트위터의 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를 같은 값으로 하는 것에 의해 버튼내의 문자(+)를 정확히 가운데의 높이에 가져갈 수가 있습니다.