CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタン

CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタンの作り方を紹介します。

CSSのみでjsは未使用なので簡単・軽量です。

サンプル

<a href="/contact/" class="contact-btn slidein"><span class="contact-btn-txt">お問い合わせ</span></a>

.contact-btn {
  display: block;
  position: fixed;
  top: 122px;
  right: 0;
  width: 46px;
  height: 180px;
  background: #333;
  z-index: 100;
  opacity: 0;
  color: #fff;
  transform: translateX(50px);
}
.contact-btn:hover {
  opacity: 0.7!important;
}
.contact-btn-txt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 50px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.contact-btn-txt::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0; right: 0;
  display: block;
  width: 22px;
  height: 21px;
  margin: 0 auto;
  background: url(../images/icon_send.png) no-repeat;
  background-size: contain;
}

.slidein {
  animation: slideIn1 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 0.3s;
}
@keyframes slideIn1 {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

上の方はほとんどボタンの見た目に関する記述ですので、用途などに合わせて自分好みに書き換えて使用してください。
39行目の .slidein クラス以降がアニメーションに関する部分となります。

よくある質問（FAQ）