<section>
<div class="btn btn__19">
<a href="#">1-19.両側から扉が閉まる</a>
</div>
</section>
section{
display: flex;
margin:2rem;
justify-content: center;
align-items: center;
}
.btn a {
display: inline-block;
text-decoration: none;
border: 2px solid #333;
color: #333;
padding: .7rem 1.5rem;
transition: .2s;
}
.btn.btn__19 a {
overflow: hidden;
position: relative;
transition: .3s;
}
.btn.btn__19 a:before, .btn.btn__19 a:after {
content: '';
display: block;
position: absolute;
top: 0;
margin: auto;
width: 0;
height: 100%;
background-color: #2382e5;
z-index: -1;
transition: .3s;
}
.btn.btn__19 a:before {
left: 0;
}
.btn.btn__19 a:after {
right: 0;
}
.btn.btn__19 a:hover {
color: white;
}
.btn.btn__19 a:hover:after, .btn.btn__19 a:hover:before {
width: 51%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.