<button class="show-box">show box</button>
body {
width: 100%;
height: 100vh;
line-height: 1.6;
background-color: #222;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.show-box {
background-color: #fff;
text-transform: uppercase;
font-size: 1.3rem;
line-height: 1;
text-align: center;
padding: 1rem;
margin-bottom: 1.5rem;
border: none;
outline: none;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0,0,0,.5) inset;
transition: background-color 0.2s,
color 0.2s;
}
.show-box:hover,
.show-box:focus {
background-color: rgba(0,0,0,.2);
color: #fff;
box-shadow: 2px 2px 3px rgba(0,0,0,.5) outset;
}
.box {
width: 100px;
height: 100px;
background-color: rebeccapurple;
border-radius: 5px;
opacity: 0;
visibility: hidden;
position: relative;
top: 0px;
transform: scale(0) translatey(-1000px);
transition: 1s;
}
.box.slide-in {
transform: scale(1) translatey(0);
opacity: 1;
visibility: visible;
}
(function() {
const button = document.querySelector(".show-box");
button.addEventListener("click", () => {
// create the box
const box = document.createElement("div");
// add a class of box
box.classList.add("box");
// insert the box element into the DOM
document.querySelector("body").appendChild(box);
// add the class that triggers the transition to the new box element
document.querySelector(".box").classList.add("slide-in");
// remove the button at the end of the animation
button.remove();
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.