diff --git a/app/styles/base.css b/app/styles/base.css
index d47ad1f3..1c184151 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -714,7 +714,7 @@ html {
 }
 #noVNC_connect_dlg .noVNC_logo {
   transition: 0.5s ease-in-out;
-  padding: 10px;
+  padding: 10px 0;
   margin-bottom: 10px;
 
   font-size: 80px;
@@ -730,25 +730,20 @@ html {
     font-size: calc(25vw - 30px);
   }
 }
-#noVNC_connect_box {
-  padding: 12px;
-
-  background-color: rgb(110, 132, 163);
-  border-radius: 12px;
-
+#noVNC_connect_button {
   text-align: center;
   font-size: 20px;
 
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
-}
-#noVNC_connect_box button {
   width: 100%;
   padding: 5px 30px;
+  margin-top: 12px;
 
   cursor: pointer;
 
   border-color: rgb(83, 99, 122);
   border-radius: 5px;
+  outline: 12px solid rgb(110, 132, 163);
+  box-shadow: 6px 6px 0px 12px rgba(0, 0, 0, 0.5);
 
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
   color: white;
@@ -756,11 +751,14 @@ html {
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
-#noVNC_connect_box button:hover {
+#noVNC_connect_button:hover {
   background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
 }
+#noVNC_connect_button:active {
+  border-top-width: 2px;
+}
 
-#noVNC_connect_box img {
+#noVNC_connect_button img {
   vertical-align: bottom;
   height: 1.3em;
 }
diff --git a/app/ui.js b/app/ui.js
index ec508e3f..ff0f1760 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -318,8 +318,7 @@ const UI = {
     addConnectionControlHandlers() {
         document.getElementById("noVNC_disconnect_button")
             .addEventListener('click', UI.disconnect);
-        document.getElementById("noVNC_connect_box")
-            .getElementsByTagName('button')[0]
+        document.getElementById("noVNC_connect_button")
             .addEventListener('click', UI.connect);
         document.getElementById("noVNC_cancel_reconnect_button")
             .addEventListener('click', UI.cancelReconnect);
diff --git a/vnc.html b/vnc.html
index 8fbe1eb2..2458b437 100644
--- a/vnc.html
+++ b/vnc.html
@@ -274,9 +274,9 @@
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
             <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
-            <div id="noVNC_connect_box"><button>
+            <button id="noVNC_connect_button">
                 <img alt="" src="app/images/connect.svg"> Connect
-            </button></div>
+            </button>
         </div>
     </div>