動くボタンの作り方（WordPress）コピペOK!　CSS記載

2021年11月19日2021年12月9日

LPやHP、ブログで、ボタンやバナーがぷるぷる動いているアニメーション。

申込みや、問い合わせなど、お客様が迷わないように、動きを付ける方法をコピペでできるコードを記載します。

ぷるぷる揺れるボタン

html

<p class="furufurubtn"><a href="#"><img src="画像のURL"/></a></p>

CSS

.furufurubtn {
  animation: furufuru .4s  infinite;
}

@keyframes furufuru {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(1px, 1px) rotateZ(1deg)}
  50% {transform: translate(0px, 1px) rotateZ(0deg)}
  75% {transform: translate(1px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

おおきくなったりちいさくなったりするボタン

html

<p class="boyoboyo"><a href="#"><img src="画像のURL"/></a></p>

css

.boyoboyo {
  animation: squash 1.2s ease-in-out infinite; /* .boyoboyo側で1.2秒おきにアニメーションを呼び出し実行する */
}
@keyframes squash {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}/*大きさを変えたいため、scaleを、1→1.1→1と変化*/
  100% {transform: scale(1);}
}

かたかた揺れるボタン

html

<p class="katakata"><a href="#"><img src="画像のURL"/></a></p>

css

.katakata {
  animation: katakata 1s infinite alternate;
}
@keyframes katakata {
0% {transform: rotate(3deg);}
13% {transform: rotate(-3deg);}
25% {transform: rotate(3deg);}
33% {transform: rotate(-3deg);}
34% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}

よこにゆらゆら優しく揺れる

html

<p class="yokoyure"><img src="画像のURL"/></p>

css


.yokoyure {
animation-name:yokoyure1;   /* アニメーション名の指定 */
animation-delay:0s;   /* アニメーションの開始時間指定 */
animation-duration: 3s;   /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite; 
}
@keyframes yokoyure1 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(1);
}
}