矢印が動き続ける(アニメーションし続ける)ボタン
通常
通常
ボタンリンク
HTML
ボタンリンク
CSS
.btn { display: inline-block; padding: .75em 4em .75em 2em; color: #333; text-decoration: none; text-align: center; border: 2px solid #000; border-radius: 3em; position: relative; transition: all ease .3s;} .btn::before { display: block; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); width: 2em; height: 2em; background: #000; border-radius: 50%; content: "";} .btn::after { display: block; position: absolute; top: 50%; right: 1.8em; transform: translateY(-50%) rotate(45deg); width: .4em; height: .4em; border-top: 2px solid #fff; border-right: 2px solid #fff; content: ""; animation: move-arrow 1.5s linear infinite;} .btn:hover { color: #fff; background: #000;} @keyframes move-arrow { 0% { right: 3em; opacity: 0;} 30% { opacity: 1;} 60% { opacity: 1;} 100% { right: 1em; opacity: 0;} }
一覧に戻る