create exit button

i robbed all the CSS don't @ me
toast
Kit Kasune 3 years ago
parent affc0fb0e9
commit 7b4a0fdbde
  1. 28
      scripts/modal/exitbtn.js
  2. 76
      styles/modal.css

@ -0,0 +1,28 @@
module.exports = (parent, btnID) => {
let wr = document.createElement('div');
wr.className = 'exit-wrapper';
parent.appendChild(wr);
let btn = document.createElement('a');
btn.className = 'exit-button';
btn.id = btnID;
wr.appendChild(btn)
let ind = document.createElement('div');
ind.className = 'exit-in';
btn.appendChild(ind);
let inbl1 = document.createElement('div');
inbl1.className = 'exit-button-block';
ind.appendChild(inbl1);
let inbl2 = document.createElement('div');
inbl2.className = 'exit-button-block';
ind.appendChild(inbl2);
let outd = document.createElement('div');
outd.className = 'exit-out';
btn.appendChild(outd);
let outbl1 = document.createElement('div');
outbl1.className = 'exit-button-block';
outd.appendChild(outbl1);
let outbl2 = document.createElement('div');
outbl2.className = 'exit-button-block';
outd.appendChild(outbl2);
return wr;
};

@ -59,3 +59,79 @@
background-color: #1717176d;
z-index: 2;
}
/* robbed this shit from some website somewhere. i'm not this cool.
* https://codepen.io/maneeshc/pen/pPxKQm
* that's the codepen i robbed it from */
.exit-wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.exit-button {
display: block;
width: 40px;
height: 40px;
position: relative;
overflow: hidden;
}
.exit-button > div {
position: relative;
}
.exit-button-block {
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.exit-button-block:before, .exit-button-block:after {
content: "";
position: absolute;
bottom: 0;
left: calc(55% - 4px);
display: block;
width: 4px;
height: 25px;
transform-origin: bottom center;
background: white;
transition: all ease-out 280ms;
}
.exit-button-block:last-of-type {
transform: rotate(180deg);
}
.exit-button .exit-in .exit-button-block:before {
transition-delay: 280ms;
transform: translateX(20px) translateY(-20px) rotate(45deg);
}
.exit-button .exit-in .exit-button-block:after {
transition-delay: 280ms;
transform: translateX(-22px) translateY(-22px) rotate(-45deg);
}
.exit-button .exit-out {
position: absolute;
top: 0;
left: 0;
}
.exit-button .exit-out .exit-button-block:before {
transform: translateX(-5px) translateY(5px) rotate(45deg);
}
.exit-button .exit-out .exit-button-block:after {
transform: translateX(5px) translateY(5px) rotate(-45deg);
}
.exit-button:hover .exit-in .exit-button-block:before {
transform: translateX(-5px) translateY(5px) rotate(45deg);
}
.exit-button:hover .exit-in .exit-button-block:after {
transform: translateX(5px) translateY(5px) rotate(-45deg);
}
.exit-button:hover .exit-out .exit-button-block:before {
transform: translateX(-20px) translateY(20px) rotate(45deg);
}
.exit-button:hover .exit-out .exit-button-block:after {
transform: translateX(20px) translateY(20px) rotate(-45deg);
}
Loading…
Cancel
Save