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);
  }
}

コメント

  1. Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

タイトルとURLをコピーしました