Button 23
Button 23
/* ===== Button 23 ===== */
#button-23.btn {
border-radius: 0;
overflow: hidden;
position: relative;
transition: all 0.3s;
}
#button-23.btn-lg
height: 50px;
padding-left: 20px;
padding-right: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
}
#button-23.btn span {
display: block;
border-radius: 0;
position: relative;
}
#button-23.btn:before,
#button-23.btn:after,
#button-23.btn span:before,
#button-23.btn span:after {
content: "";
position: absolute;
top: 0;
left: 0;
transition: all 0.15s;
}
#button-23.btn:before,
#button-23.btn:after {
width: 2px;
height: 0;
}
#button-23.btn span:before,
#button-23.btn span:after {
width: 0;
height: 2px;
transition-delay: 0.15s;
}
#button-23.btn:after {
top: auto;
left: auto;
right: 0;
bottom: 0;
}
#button-23.btn span:before {
right: 0;
left: auto;
}
#button-23.btn span:after {
top: auto;
bottom: 0;
}
#button-23.btn:hover:before,
#button-23.btn:hover:after {
height: 100%;
transition-delay: 0.15s;
}
#button-23.btn:hover span:before,
#button-23.btn:hover span:after {
width: 100%;
transition-delay: 0s;
}
#button-23.btn.btn-outline:before,
#button-23.btn.btn-outline:after,
#button-23.btn.btn-outline span:before,
#button-23.btn.btn-outline span:after {
background: var(--bs-dark);
}