css button
/*css button 2 buttonSLIDE FROM BOTTOM or SLIDE FROM TOP by Qamber Abbas*/
<style>
:root {
--primary-bg: #3498db;
--fontcolor:#fff;
--fonthovercolor:#ecf0f1;
--hovercolorbg:#3498db;}
.wrapper {
max-width: 65rem;
width: 100%;
margin: 2rem auto;
padding: 5rem;
text-align: center;
}
.button {
font-size: 2em;
background: var(--primary-bg);
color: var(--fontcolor);
border: 0.25rem solid #3498db;
padding: 0.85em 0.75em;
margin: 1rem;
position: relative;
z-index: 1;
overflow: hidden;
}
.button:hover {
color: var(--hovercolorbg);
}
.button::after {
content: "";
background: var(--fonthovercolor);
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_top::after {
left: 0;
right: 0;
top: -100%;
bottom: 100%;
}
.button.slide_from_bottom::after {
left: 0;
right: 0;
top: 100%;
bottom: -100%;
}
</style>
<div class="wrapper">
<button class="slide_from_top button">SLIDE FROM TOP</button>
<button class="slide_from_bottom button">SLIDE FROM BOTTOM</button>
</div>