hoverで線が揃うボタン

通常

ボタンリンク

HTML<a href="" class="btn">ボタンリンク</a> CSS.btn { display: inline-block; padding: .75em 2em; color: #333; text-decoration: none; transition: all ease .3s; position: relative; transition: all ease .3s; transition-delay: .3s;} .btn::before, .btn::after { display: block; position: absolute; width: 100%; height: 1px; background: #333; content: ""; transition: all ease .3s;} .btn::before { right: -1em; top: 0;} .btn::after { left: -1em; bottom: 0;} .btn:hover { color: rgb(0, 224, 93);} .btn:hover::before { right: 0;} .btn:hover::after { left: 0;}

通常