diff --git a/app/frontend/stylesheets/snippets/buttons.scss b/app/frontend/stylesheets/snippets/buttons.scss
index 365c3e7..fe57f41 100644
--- a/app/frontend/stylesheets/snippets/buttons.scss
+++ b/app/frontend/stylesheets/snippets/buttons.scss
@@ -79,6 +79,7 @@ input[type="button"],
     }
 
     &:hover:not(:disabled) {
+      transform: translateY(-1px);
       background: #fcfcfc linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.02) 100%) !important;
       border-color: rgba(0, 0, 0, 0.15) !important;
       box-shadow: 
@@ -97,6 +98,7 @@ input[type="button"],
     }
 
     &:active:not(:disabled) {
+      transform: translateY(0);
       box-shadow: 
         inset 0 3px 6px rgba(0, 0, 0, 0.15),
         inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
@@ -107,10 +109,64 @@ input[type="button"],
           inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
       }
     }
+
+    // Override for delete variant on secondary
+    &.delete {
+      background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
+      border: 1px solid #991b1b !important;
+      color: #ffffff !important;
+      box-shadow: 
+        0 2px 6px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+
+      [data-theme="dark"] & {
+        background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
+        border: 1px solid #b91c1c !important;
+        color: #ffffff !important;
+        box-shadow: 
+          0 2px 8px rgba(0, 0, 0, 0.3),
+          inset 0 1px 0 rgba(255, 255, 255, 0.2),
+          inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+      }
+
+      &:hover:not(:disabled) {
+        transform: translateY(-1px);
+        background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
+        border-color: #991b1b !important;
+        box-shadow: 
+          0 4px 12px rgba(0, 0, 0, 0.2),
+          inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+
+        [data-theme="dark"] & {
+          background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
+          border-color: #dc2626 !important;
+          box-shadow: 
+            0 4px 16px rgba(0, 0, 0, 0.4),
+            inset 0 1px 0 rgba(255, 255, 255, 0.25),
+            inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+        }
+      }
+
+      &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: 
+          inset 0 3px 6px rgba(0, 0, 0, 0.3),
+          inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+
+        [data-theme="dark"] & {
+          box-shadow: 
+            inset 0 3px 6px rgba(0, 0, 0, 0.4),
+            inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+        }
+      }
+    }
   }
 
-  // Danger button variant (skeumorphic style)
-  &.danger {
+  // Danger/Delete button variant (skeumorphic style)
+  &.danger,
+  &.delete {
     background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
     border: 1px solid #991b1b !important;
     color: white !important;
@@ -119,19 +175,98 @@ input[type="button"],
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
 
+    [data-theme="dark"] & {
+      background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
+      border: 1px solid #b91c1c !important;
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+    }
+
     &:hover:not(:disabled) {
+      transform: translateY(-1px);
       background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
       border-color: #991b1b !important;
       box-shadow: 
         0 4px 12px rgba(0, 0, 0, 0.2),
         inset 0 1px 0 rgba(255, 255, 255, 0.25),
         inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+
+      [data-theme="dark"] & {
+        background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
+        border-color: #dc2626 !important;
+        box-shadow: 
+          0 4px 16px rgba(0, 0, 0, 0.4),
+          inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+      }
     }
     
     &:active:not(:disabled) {
+      transform: translateY(0);
       box-shadow: 
         inset 0 3px 6px rgba(0, 0, 0, 0.3),
         inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+
+      [data-theme="dark"] & {
+        box-shadow: 
+          inset 0 3px 6px rgba(0, 0, 0, 0.4),
+          inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+      }
+    }
+  }
+
+  // Approve button variant (green skeumorphic style)
+  &.approve {
+    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
+    border: 1px solid #166534 !important;
+    color: #ffffff !important;
+    box-shadow: 
+      0 2px 6px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+
+    [data-theme="dark"] & {
+      background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
+      border: 1px solid #15803d !important;
+      color: #ffffff !important;
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+    }
+
+    &:hover:not(:disabled) {
+      transform: translateY(-1px);
+      background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
+      border-color: #166534 !important;
+      box-shadow: 
+        0 4px 12px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.25),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+
+      [data-theme="dark"] & {
+        background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important;
+        border-color: #16a34a !important;
+        box-shadow: 
+          0 4px 16px rgba(0, 0, 0, 0.4),
+          inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
+      }
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: 
+        inset 0 3px 6px rgba(0, 0, 0, 0.3),
+        inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+
+      [data-theme="dark"] & {
+        box-shadow: 
+          inset 0 3px 6px rgba(0, 0, 0, 0.4),
+          inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+      }
     }
   }
 }
diff --git a/app/views/doorkeeper/authorizations/new.html.erb b/app/views/doorkeeper/authorizations/new.html.erb
index c86de34..1ae09c6 100644
--- a/app/views/doorkeeper/authorizations/new.html.erb
+++ b/app/views/doorkeeper/authorizations/new.html.erb
@@ -89,7 +89,7 @@
         <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
         <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
         <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
-        <%= submit_tag t('.deny'), class: "secondary" %>
+        <%= submit_tag t('.deny'), class: "secondary delete" %>
       <% end %>
 
       <%= form_tag oauth_authorization_path, method: :post do %>
@@ -101,7 +101,7 @@
         <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
         <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
         <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
-        <%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "ready ? authLabel : `Wait ${countdown}s...`" %>
+        <%= submit_tag auth_label, "x-bind:disabled": "!ready", "x-bind:value": "ready ? authLabel : `Wait ${countdown}s...`", class: "approve" %>
       <% end %>
     </div>
   </div>