Slide in/out simple demo

by Michał Oręziak

HTML

<code class="slide">border-radius: 10px;</code>
<button>Show</button>

CSS

.slide{
  position:relative;
  background:inherit;
}
.slide::after{
  content: '';
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  right:0;
  z-index:999;
 background:inherit;
   animation: 2s hide;
   transition:2s all;
}
.slide.shown::after{
  width:0;
}

JavaScript

document.querySelector('button').addEventListener('click', e => {
document.querySelector('.slide').classList.toggle('shown');

e.target.innerText = e.target.innerText == 'Show' ? 'Hide' : 'Show'; // Just for changing button text
});