diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
index 805bf9cefe75d..cb43ca9f9c7ef 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.html
@@ -20,7 +20,10 @@
   <div class="operate-action">
     <span *ngIf="statusTips">{{ statusTips }}</span>
     <ng-container *ngIf="!statusTips">
-      <a
+      <button
+        nz-button
+        nzDanger
+        nzSize="small"
         nz-popconfirm
         nzPopconfirmTitle="Cancel Application?"
         nzOkText="Yes"
@@ -32,7 +35,7 @@
         "
       >
         Cancel Application
-      </a>
+      </button>
     </ng-container>
   </div>
 </ng-template>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
index 776a1de5d9d5d..5407b3ea19cfb 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.less
@@ -31,7 +31,18 @@
   }
 
   .operate-action {
-    font-size: 24px;
+    font-size: @font-size-base;
+
+    button {
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: @error-color;
+        background-color: @error-color;
+        color: #fff;
+        box-shadow: 0 2px 6px fade(@error-color, 30%);
+      }
+    }
   }
 
   .status-wrapper {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
index 07dcda5957990..876022da91a26 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/application/application-detail/status/application-status.component.ts
@@ -35,6 +35,7 @@ import {
   ApplicationModuleConfig
 } from '@flink-runtime-web/pages/application/application.config';
 import { ApplicationService, StatusService } from '@flink-runtime-web/services';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -47,6 +48,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgIf,
+    NzButtonModule,
     NzPopconfirmModule,
     NzDescriptionsModule,
     NzDividerModule,
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
index 0c7a867f08986..4bb9c8ba1e42b 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.html
@@ -29,7 +29,10 @@
   <div class="operate-action">
     <span *ngIf="statusTips">{{ statusTips }}</span>
     <ng-container *ngIf="!statusTips">
-      <a
+      <button
+        nz-button
+        nzDanger
+        nzSize="small"
         nz-popconfirm
         nzPopconfirmTitle="Cancel Job?"
         nzOkText="Yes"
@@ -43,7 +46,7 @@
         "
       >
         Cancel Job
-      </a>
+      </button>
     </ng-container>
   </div>
 </ng-template>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
index 8285f1179541b..6302cfaaad864 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.less
@@ -31,7 +31,18 @@
   }
 
   .operate-action {
-    font-size: 24px;
+    font-size: @font-size-base;
+
+    button {
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: @error-color;
+        background-color: @error-color;
+        color: #fff;
+        box-shadow: 0 2px 6px fade(@error-color, 30%);
+      }
+    }
   }
 
   .status-wrapper {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
index c9a1e07cb9d4d..c140a22955ba0 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/job-detail/status/job-status.component.ts
@@ -31,6 +31,7 @@ import { JobDetailCorrect } from '@flink-runtime-web/interfaces';
 import { JobLocalService } from '@flink-runtime-web/pages/job/job-local.service';
 import { JOB_MODULE_CONFIG, JOB_MODULE_DEFAULT_CONFIG, JobModuleConfig } from '@flink-runtime-web/pages/job/job.config';
 import { JobManagerService, JobService, StatusService } from '@flink-runtime-web/services';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -43,6 +44,7 @@ import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgIf,
+    NzButtonModule,
     NzPopconfirmModule,
     NzDescriptionsModule,
     NzDividerModule,