diff --git a/src/functions/contextmenu.js b/src/functions/contextmenu.js
index e16fab27a66ba234ae7f919f7a2a4d57db0f7bbd..fe6ab3dfd4a790704b7cf4ccaf255d3f7d6631ae 100644
--- a/src/functions/contextmenu.js
+++ b/src/functions/contextmenu.js
@@ -12,7 +12,7 @@ export const initContextmenu = (instance) => {
       window.selectedConnection = component;
       $(
         `<div class='custom-menu'>
-          <button style='background-color: red; color: white; border: none; padding: 6px 12px;' class='delete-connection'>
+          <button class='custom-menu-button' id='delete-connection'>
             Delete connection
           </button>
         </div>`
@@ -22,7 +22,7 @@ export const initContextmenu = (instance) => {
     }
   });
 
-  $("body").on("click", ".delete-connection", (event) => {
+  $("body").on("click", "#delete-connection", (event) => {
     instance.deleteConnection(window.selectedConnection);
   });
   $(document).bind("click", (event) => {
diff --git a/src/style.css b/src/style.css
index 1bc66da7288f13c54e72440bb501fadb31e87f70..9e31c78c60515c5702bb9fbc6df38b4f0a82bc9a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -98,6 +98,7 @@ body {
 
 #delete-pipe:hover {
   background-color: red;
+  color: white;
 }
 
 #delete-filter:hover {
@@ -105,6 +106,11 @@ body {
   color: white;
 }
 
+#delete-connection:hover {
+  background-color: red;
+  color: white;
+}
+
 #scale-out:hover {
   background-color: blue;
   color: white;