HTMLとCSSを使って収縮ボタンを作る方法を解説!!｜サンプルコード付き

はじめに

この記事では、HTMLとCSSを使って収縮ボタンを作るための「サンプルコード」・「記述内容の説明」を掲載しています。

<div class="pushBtn">
  PUSH
</div>

  .pushBtn {
  border: 0.5px solid;
    border-radius: 5px;
    margin: 0 auto;
    width: 33%;
    text-align: center;
    background-color: #808080;
    color: #FFF;

  animation: pushBtn 2s ease-out infinite;
  animation-direction: alternate;
  opacity: 1;
}
@keyframes pushBtn {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}