光ってアピールし続けるボタン

コンバージョン達成に有用な、主張の強いボタンです。

常時アニメーションしているので、スマホでも目に留まりやすいボタンです。

通常

ボタンリンク

HTML<a href="" class="btn">ボタンリンク</a> 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;} }

通常