線上を四角が動き続けるボタン

通常

ボタンリンク

HTML<a href="" class="btn">ボタンリンク</a> CSS.btn { display: inline-block; padding: .75em 3.75em; min-width: 300px; color: #fff; text-decoration: none; text-align: center; background: #4d372c; border: 1px solid #fff; position: relative; box-sizing: border-box;} .btn::before { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3.75em; height: 1px; background: #fff; content: "";} .btn::after { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 5px; height: 5px; background: #fff; content: ""; animation: btn-animate 2s ease infinite;} @keyframes btn-animate { 0% { right: 3.75em; opacity: 0;} 50% { opacity: 1;} 100% { right: 0; opacity: 0;} }

通常