光ってアピールし続けるボタン
コンバージョン達成に有用な、主張の強いボタンです。
常時アニメーションしているので、スマホでも目に留まりやすいボタンです。
通常
通常
ボタンリンク
HTML
ボタンリンク
CSS
.btn { display: inline-block; padding: .75em 2em; color: #fff; text-decoration: none; background: linear-gradient(to right, #ffd900, #ff7600); transition: all ease .3s; position: relative;} .btn::after { display: block; position: absolute; left: 0; top: 0; transform-origin: center center; width: 100%; height: 100%; border: 1px solid orange; opacity: 0; content: ""; animation: btn-pulse 1s infinite linear;} @keyframes btn-pulse { 0% { transform: scale(1); opacity: 1;} 100% { transform: scale(1.2, 1.5); opacity: 0;} }
一覧に戻る