<div class="wrapper">
  <header>
    <a href="#" class="fix-btn">問い合わせはこちら</a>
  </header>
  <div class="box">&nbsp;</div>
</div>
/*コンテンツ部分*/
.box{
  background:#ddd;
  width:100%;
  height:800px;
}
/*追従ボタン*/
.fix-btn{
  position:fixed;
  z-index:1;
  background:#2dd8c8;
  width:150px;
  border-radius:15px;
  text-decoration:none;
  font-size:14px;
  text-align:center;
  color:#333;
  padding:20px 0;
  right:20px;
  bottom:20px;
  box-shadow:1px 1px 5px #aaa;
  animation: move 4s infinite;
}
@keyframes move {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(4deg, 4deg);
  }
  10% {
    transform: skew(-3deg, -3deg);
  }
  15% {
    transform: skew(2deg, 2deg);
  }
  20% {
    transform: skew(-1deg, -1deg);
  }
  25% {
    transform: skew(0.6deg, 0.6deg);
  }
  30% {
    transform: skew(-0.4deg, -0.4deg);
  }
  35% {
    transform: skew(0.2deg, 0.2deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.