ここでは、各種CSSアニメーションを使ったCTAボタンのコードを示します。各ボタンには異なるクラスを付け、それぞれに具体的なアニメーションを適用します。
1. 上下に動くボタン (float-up-down
)
<button class="float-up-down">クリック</button>
<style>
.float-up-down {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #3498db;
background-color: #2980b9;
color: white;
cursor: pointer;
border-radius: 5px;
animation: floatUpDown 1.5s ease-in-out infinite;
}
@keyframes floatUpDown {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
</style>
2. 左右に動くボタン (move-left-right
)
<button class="move-left-right">クリック</button>
<style>
.move-left-right {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #e74c3c;
background-color: #c0392b;
color: white;
cursor: pointer;
border-radius: 5px;
animation: moveLeftRight 1.5s ease-in-out infinite;
}
@keyframes moveLeftRight {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(15px);
}
}
</style>
3. 拡大・縮小を繰り返すボタン (pulse
)
<button class="pulse">クリック</button>
<style>
.pulse {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #9b59b6;
background-color: #8e44ad;
color: white;
cursor: pointer;
border-radius: 5px;
animation: pulseEffect 1s ease-in-out infinite;
}
@keyframes pulseEffect {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
4. 揺れるボタン (shake
)
<button class="shake">クリック</button>
<style>
.shake {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #2ecc71;
background-color: #27ae60;
color: white;
cursor: pointer;
border-radius: 5px;
animation: shakeEffect 1s ease-in-out infinite;
}
@keyframes shakeEffect {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
</style>
5. ガタガタ震えるボタン (vibrate
)
<button class="vibrate">クリック</button>
<style>
.vibrate {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #f39c12;
background-color: #f1c40f;
color: white;
cursor: pointer;
border-radius: 5px;
animation: vibrateEffect 0.2s linear infinite;
}
@keyframes vibrateEffect {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(5px);
}
}
</style>
6. キラリと光るボタン (shine
)
<div class="shine_box"><button class="shine">クリック</button></div>
<style>
.shine_box{
position:relative;}
.shine {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #f1c40f;
background-color: #f39c12;
color: white;
cursor: pointer;
border-radius: 5px;
animation: sparkleEffect 1.5s ease-in-out infinite;
}
@keyframes sparkleEffect {
0%, 100% {
box-shadow: 0 0 5px 5px #f39c12;
}
50% {
box-shadow: 0 0 20px 20px #f1c40f;
}
}
</style>
7. 点滅するボタン (glow
)
<button class="
0.5blink
">クリック</button>
<style>
.blink {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #8e44ad;
background-color: #9b59b6;
color: white;
cursor: pointer;
border-radius: 5px;
animation: glowEffects ease-in-out infinite;
0.5
}
/* 点滅アニメーション */
.blink {
animation: blinkEffects infinite alternate;
}
@keyframes blinkEffect {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>
8. ゆっくりと光が広がるボタン (glow-expand
)
<button class="glow-expand">クリック</button>
<style>
.glow-expand {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #e74c3c;
background-color: #c0392b;
color: white;
cursor: pointer;
border-radius: 5px;
animation: glowExpand 2s ease-out infinite;
}
@keyframes glowExpand {
0% {
box-shadow: 0 0 5px #c0392b;
}
100% {
box-shadow: 0 0 20px 15px #e74c3c;
}
}
</style>
9. 前方向に回るボタン (spin
)
クリック
<div class="btn_box">
<div class="btn_spin spin">クリック</div>
</div>
<style>
.btn_box {
width: 100%;
margin: 0;
}
.btn_spin {
color: #fff;
font-size: 16px;
text-align: center;
line-height: 70px;
letter-spacing: 3px;
width: 200px;
height: 70px;
background: #000;
margin: auto;
cursor: pointer;
border-radius: 100px;
display: inline-block;
}
.spin {
animation: kurukuru 4s infinite;
scale: 1;
}
@keyframes kurukuru {
0% { transform: rotateX(0deg); }
35% { transform: rotateX(360deg); }
100% { transform: rotateX(360deg); }
}
</style>
これで、異なる動きをする9種類のボタンが作成できます。それぞれのボタンにはクラス名が異なるので、HTMLコードに対応するクラスを追加して使用できます。