css button
/*css button slide to L to R by QamberAbbas */
<style>
:root {
--primary-bg: white;
--fontcolor:black;
--fonthovercolor:white;
--hovercolorbg:black;
}
.button {
text-align: center;
font-size: 27px;
background: var(--primary-bg);
color: var(--fontcolor);
border: 1 solid black;
padding: 15px 20px 15px 20px;
margin: 20px;
position: relative;
z-index: 1;
overflow: hidden;
}
.button:hover {
color: var(--fonthovercolor);
}
.button::after {
content: "";
background: var(--hovercolorbg);
position: absolute;
z-index: -1;
padding: 0.85em 0.75em;
display: block;
}
.button[class^="slide"]::after {
transition: all 0.35s;
}
.button[class^="slide"]:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 0.35s;
}
.button.slide_from_left::after {
top: 0;
bottom: 0;
left: -100%;
right: 100%;
}
.wrapper1{
text-align:center;
}
</style>
<div class="wrapper1">
<button class="slide_from_left button">EXPLORE SERVICE</button>
</div>