make wrath buttons blue and make cursor glow on hover slider handle

assets/css/styles.css

@@ -58,6 +58,10 @@ html, body {
     margin-top: 95px;
 }
 
+#disconButton{
+    margin-top: 95px;
+}
+
 #copyrightText {
     font-family: 'FRIZQT';
     font-size: 15px;
@@ -171,6 +175,45 @@ html, body {
     background: url('../img/ui/buttons/button_pressed.png') no-repeat top;
 }
 
+.button_b {
+    font-family: 'FRIZQT';
+    font-size: 23px;
+    text-align: center;
+    color: #ffc700;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_idle_b.png') no-repeat top;
+    width: 270px;
+    height: 71px;
+    border: none;
+    outline: none;
+    display: block;
+    margin-top: -25px;
+    transform: scale(0.8);
+    filter: drop-shadow(0px 0px 8px #000);
+    z-index: 2;
+	cursor: url('../img/ui/Point.png'), auto;
+}
+
+.button_b:hover {
+    font-family: 'FRIZQT';
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_hover_b.png') no-repeat top;
+}
+
+.button_b:active {
+    font-family: 'FRIZQT';
+    font-size: 22px;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_pressed_b.png') no-repeat top;
+}
+
 .centered {
     min-height: 100vh;
     display:flex;
@@ -249,6 +292,7 @@ html, body {
     background: transparent;
     border: 8px solid;
     border-image: url('../img/ui/UI_SliderBorder.png') 35% round;
+    cursor: url('../img/ui/Point.png'), auto;
     outline: none;
     opacity: 1;
     -webkit-transition: .2s;
@@ -266,7 +310,7 @@ html, body {
     width: 32px;
     height: 32px;
     background: url('../img/ui/UI_SliderHandle.png');
-    cursor: url('../img/ui/Point.png'), auto;
+    cursor: url('../img/ui/Cast.png'), auto;
     transform: scale(1.6);
     border: none;
     z-index: 4;
@@ -276,7 +320,7 @@ html, body {
     width: 32px;
     height: 32px;
     background: url('../img/ui/UI_SliderHandle.png');
-    cursor: url('../img/ui/Point.png'), auto;
+    cursor: url('../img/ui/Cast.png'), auto;
     transform: scale(1.6);
     border: none;
     z-index: 4;

assets/js/audiohandler.js

@@ -40,6 +40,18 @@ var dateMap = [
     'Oct 13 2020'
 ];
 
+var buttonColorMap = [
+    0,
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0
+];
+
 var copyMap = [
     2006,
     2008,
@@ -171,6 +183,8 @@ function switchExpansion()
     version.textContent = verMap[expansion];
     date.textContent = dateMap[expansion];
     copyright.textContent = `Copyright 2004-${copyMap[expansion]} Blizzard Entertainment. All Right Reserved.`;
+    setButtonColors(buttonColorMap[expansion]);
+    
     bg.load();
     bg.play();
     audio.play();
@@ -236,3 +250,27 @@ function adjustVolume()
     buttonAudio.volume = val;
     document.getElementById('background').volume = val;
 }
+
+function setButtonColors(index)
+{
+    var quitButton = document.getElementById("quitButton");
+    var optButton = document.getElementById("optButton");
+    var realmListButton = document.getElementById("realmListButton");
+    var disconButton = document.getElementById("disconButton");
+    switch(index)
+    {
+        case 0:
+            quitButton.className = "button";
+            optButton.className = "button";
+            realmListButton.className = "button";
+            disconButton.className = "button";
+        break;
+
+        case 1:
+            quitButton.className = "button_b";
+            optButton.className = "button_b";
+            realmListButton.className = "button_b";
+            disconButton.className = "button_b";
+        break;
+    }
+}

index.html

@@ -12,10 +12,10 @@
             <!-- LOGO -->
             <button class="xPacButton" id="logo" onclick="manualChangeExpac(); playButtonAudio(1);"></button>
             
-            <!--QUIT BUTTON-->
+            <!--QUIT BUTTON AND OPTIONS BUTTON-->
             <div id="quitButtonContainer" class="foreground">
-                <button class="button" onclick="playButtonAudio(0); showSettings();" > Options </button>
-                <button class="button" onclick="location.href='http://www.wowaholics.org/'; playButtonAudio(0);" > Quit </button>
+                <button id="optButton" class="button" onclick="playButtonAudio(0); showSettings();" > Options </button>
+                <button id="quitButton" class="button" onclick="location.href='http://www.wowaholics.org/'; playButtonAudio(0);" > Quit </button>
             </div>
             
             <!--OPTIONS PANEL-->
@@ -53,7 +53,7 @@
                     <p class="queueText">(WOW51900319)</p>
                 </div>
                 
-                <button class="button" id="realmListButton" onclick="playButtonAudio(1); resetQueue();"> Okay </button>
+                <button class="button" id="disconButton" onclick="playButtonAudio(1); resetQueue();"> Okay </button>
             </div>
 
             <!--COPYRIGHT TEXT-->