pad shifting

pad.html

@@ -1,72 +1,102 @@
 <style>
+
 .window
 {
     position:relative;
     width:500px;
-    border:5px solid black;
     padding:20px;
     border-bottom: none;
     box-sizing:border-box;
 }
+
+
 .bar
 {
     position:relative;
     bottom:0;
     left:0;
     width:100%;
-    height:21px;
+    height:44px;
     overflow:hidden;
 }
-.bar.inverted
-{
-    transform: translateY(16px) scaleY(-1);
-}
 .bar span
 {
     display: block;
     position: absolute;
-    bottom: 0;
+    top: -10.5px;
     left: 50%;
     width: 20px;
-    height: 21px;
+    height: 20px;
     border: 5px solid #000;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
     transform: translate(-50%, 20px) rotate(45deg);
+    transition: left 0.4s;
 }
-
+.bar span::before, .bar span::after
-.bar::before, .bar::after
 {
     content: " ";
     display: block;
     position: absolute;
-    bottom:0;
+    width: 1000px;
-    width:100%;
+    height:0px;
     border-top: 5px solid black;
+    transform:rotate(-45deg);
 }
-.bar::before
+.bar span::before
+{
+    bottom: -0.5px;
+    right: 20px;
+    transform-origin: right bottom;
+}
+.bar span::after
+{
+    top: -4px;
+    left: 17px;
+    transform-origin: left top;
+}
+.bar--down
+{
+    transform: scaleY(-1);
+}
+.bar--up
+{
+    transform: scaleY(1);
+}
+.bar--1-3 span
+{
+    left:16.6%;
+}
+.bar--2-3 span
 {
-    margin-left:11px;
     left:50%;
 }
-.bar::after
+.bar--3-3 span
 {
-    margin-right:11px;
+    left:83%;
-    right:50%;
 }
+
+
 button
 {
     display:inline-block;
-    padding:20px 0px 20px 0px;
+    padding:5px 0px 5px 0px;
     box-sizing: border-box;
     width:33%;
 }
 </style>
 <div class="window">
-    <div class="bar"><span></span></div>
-    <div class="bar inverted"><span></span></div>
     <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
-    <button>Front</button><button>Spine</button><button>Back</button>
+    <button onclick="BarPos(1)">Front</button><button onclick="BarPos(2)">Spine</button><button onclick="BarPos(3)">Back</button>
-    <button>Intro</button><button>1 & 2</button><button>3 & 4</button>
     <div class="bar"><span></span></div>
+    <button onclick="BarPos(4)">Intro</button><button onclick="BarPos(5)">1 & 2</button><button onclick="BarPos(6)">3 & 4</button>
 </div>
 
-    
+<script>
+    function BarPos(index)
+    {
+        var classX = "bar--" + (((index-1) % 3)+1) + "-3";
+        var classY = index > 3 ? "bar--down" : "bar--up";
+        document.querySelector(".bar").setAttribute("class", "bar " + classX + " " + classY);
+    }
+</script>