create exit button

i robbed all the CSS don't @ me

scripts/modal/exitbtn.js

@@ -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;
+};

styles/modal.css

@@ -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);
+}