装飾が外周を回り続ける円形のボタン

使いどころは選ぶ必要がありますが、
特に訴求したい内容を乗せたページへの導線としてメインビジュアルに乗せるなど、ここぞというところで使えるボタンです。

通常

ボタンリンク

HTML<a href="" class="btn"> <div class="btn-inner"></div> <span class="btn-txt">ボタンリンク</span> </a> CSS.btn { display: block; width: 10em; color: #fff; text-decoration: none; background: #000; border-radius: 50%; position: relative;} .btn-inner { animation: btn-rotate 5s infinite linear;} .btn-inner::before { display: block; padding-top: 100%; content: "";} .btn-inner::after { display: block; position: absolute; top: .45em; left: 50%; transform: translateX(-50%); width: .5em; height: .5em; background: #fff; content: "";} .btn-txt { display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;} .btn-txt::before { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); height: calc(100% - 20px); border: 2px solid #fff; border-radius: 50%; content: "";} @keyframes btn-rotate { 0% { transform: rotate(0); opacity: .5;} 25% { opacity: 1;} 50% { transform: rotate(180deg); opacity: .5;} 75% { opacity: 1;} 100% { transform: rotate(360deg); opacity: .5;} }

通常