diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts
index 28f9d4b9a8e4..f15e2dc99289 100644
--- a/components/drawer/style/index.ts
+++ b/components/drawer/style/index.ts
@@ -1,5 +1,6 @@
 import { unit } from '@ant-design/cssinjs';
 
+import { genFocusStyle } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
@@ -27,12 +28,14 @@ export interface DrawerToken extends FullToken<'Drawer'> {}
 // =============================== Base ===============================
 const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
   const {
+    borderRadiusSM,
     componentCls,
     zIndexPopup,
     colorBgMask,
     colorBgElevated,
     motionDurationSlow,
     motionDurationMid,
+    paddingXS,
     padding,
     paddingLG,
     fontSizeLG,
@@ -40,13 +43,16 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
     lineWidth,
     lineType,
     colorSplit,
-    marginSM,
+    marginXS,
     colorIcon,
     colorIconHover,
+    colorBgTextHover,
+    colorBgTextActive,
     colorText,
     fontWeightStrong,
     footerPaddingBlock,
     footerPaddingInline,
+    calc,
   } = token;
 
   const wrapperCls = `${componentCls}-content-wrapper`;
@@ -167,8 +173,13 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
       },
 
       [`${componentCls}-close`]: {
-        display: 'inline-block',
-        marginInlineEnd: marginSM,
+        display: 'inline-flex',
+        width: calc(fontSizeLG).add(paddingXS).equal(),
+        height: calc(fontSizeLG).add(paddingXS).equal(),
+        borderRadius: borderRadiusSM,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginInlineEnd: marginXS,
         color: colorIcon,
         fontWeight: fontWeightStrong,
         fontSize: fontSizeLG,
@@ -179,15 +190,21 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
         textDecoration: 'none',
         background: 'transparent',
         border: 0,
-        outline: 0,
         cursor: 'pointer',
-        transition: `color ${motionDurationMid}`,
+        transition: `all ${motionDurationMid}`,
         textRendering: 'auto',
 
-        '&:focus, &:hover': {
+        '&:hover': {
           color: colorIconHover,
+          backgroundColor: colorBgTextHover,
           textDecoration: 'none',
         },
+
+        '&:active': {
+          backgroundColor: colorBgTextActive,
+        },
+
+        ...genFocusStyle(token),
       },
 
       [`${componentCls}-title`]: {
diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts
index 89e46b2b751f..45f360e32945 100644
--- a/components/modal/style/index.ts
+++ b/components/modal/style/index.ts
@@ -42,10 +42,6 @@ export interface ComponentToken {
    */
   footerBg: string;
 
-  /** @internal */
-  closeBtnHoverBg: string;
-  /** @internal */
-  closeBtnActiveBg: string;
   /** @internal */
   contentPadding: number | string;
   /** @internal */
@@ -78,8 +74,8 @@ export interface ModalToken extends FullToken<'Modal'> {
   modalFooterBorderColorSplit: string;
   modalFooterBorderStyle: string;
   modalFooterBorderWidth: number;
-  modalIconHoverColor: string;
   modalCloseIconColor: string;
+  modalCloseIconHoverColor: string;
   modalCloseBtnSize: number | string;
   modalConfirmIconSize: number | string;
   modalTitleHeight: number | string;
@@ -248,13 +244,13 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           },
 
           '&:hover': {
-            color: token.modalIconHoverColor,
-            backgroundColor: token.closeBtnHoverBg,
+            color: token.modalCloseIconHoverColor,
+            backgroundColor: token.colorBgTextHover,
             textDecoration: 'none',
           },
 
           '&:active': {
-            backgroundColor: token.closeBtnActiveBg,
+            backgroundColor: token.colorBgTextActive,
           },
 
           ...genFocusStyle(token),
@@ -348,9 +344,9 @@ export const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalT
     modalFooterBorderColorSplit: token.colorSplit,
     modalFooterBorderStyle: token.lineType,
     modalFooterBorderWidth: token.lineWidth,
-    modalIconHoverColor: token.colorIconHover,
     modalCloseIconColor: token.colorIcon,
-    modalCloseBtnSize: token.fontHeight,
+    modalCloseIconHoverColor: token.colorIconHover,
+    modalCloseBtnSize: token.controlHeight,
     modalConfirmIconSize: token.fontHeight,
     modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal(),
   });
@@ -367,8 +363,6 @@ export const prepareComponentToken = (token: GlobalToken) => ({
   titleColor: token.colorTextHeading,
 
   // internal
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
-  closeBtnActiveBg: token.wireframe ? 'transparent' : token.colorFillContentHover,
   contentPadding: token.wireframe
     ? 0
     : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
index 7d27d45f82d8..0c69ad787a04 100644
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@@ -27,13 +27,7 @@ export function getCloseIcon(prefixCls: string, closeIcon?: React.ReactNode): Re
   if (closeIcon === null || closeIcon === false) {
     return null;
   }
-  return (
-    closeIcon || (
-      <span className={`${prefixCls}-close-x`}>
-        <CloseOutlined className={`${prefixCls}-close-icon`} />
-      </span>
-    )
-  );
+  return closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />;
 }
 
 export interface PureContentProps {
diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3d5890ab3c2c..9e9fc643faba 100644
--- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -510,28 +510,24 @@ exports[`renders components/notification/demo/render-panel.tsx extend context co
       tabindex="0"
     >
       <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
       >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
       </span>
     </a>
   </div>
diff --git a/components/notification/__tests__/__snapshots__/demo.test.ts.snap b/components/notification/__tests__/__snapshots__/demo.test.ts.snap
index b2d1b6a46c62..bde280b99674 100644
--- a/components/notification/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo.test.ts.snap
@@ -498,28 +498,24 @@ exports[`renders components/notification/demo/render-panel.tsx correctly 1`] = `
       tabindex="0"
     >
       <span
-        class="ant-notification-close-x"
+        aria-label="close"
+        class="anticon anticon-close ant-notification-close-icon"
+        role="img"
       >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-notification-close-icon"
-          role="img"
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          fill-rule="evenodd"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            fill-rule="evenodd"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+          />
+        </svg>
       </span>
     </a>
   </div>
diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts
index 0ecd65146f70..ee3bdc9593ed 100644
--- a/components/notification/style/index.ts
+++ b/components/notification/style/index.ts
@@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
@@ -21,8 +21,6 @@ export interface ComponentToken {
    * @descEN Width of Notification
    */
   width: number;
-  /** @internal */
-  closeBtnHoverBg: string;
 }
 
 export interface NotificationToken extends FullToken<'Notification'> {
@@ -80,11 +78,6 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
       wordWrap: 'break-word',
     },
 
-    [`${componentCls}-close-icon`]: {
-      fontSize,
-      cursor: 'pointer',
-    },
-
     [`${noticeCls}-message`]: {
       marginBottom: token.marginXS,
       color: colorTextHeading,
@@ -151,8 +144,14 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
 
       '&:hover': {
         color: token.colorIconHover,
-        backgroundColor: token.closeBtnHoverBg,
+        backgroundColor: token.colorBgTextHover,
       },
+
+      '&:active': {
+        backgroundColor: token.colorBgTextActive,
+      },
+
+      ...genFocusStyle(token),
     },
 
     [`${noticeCls}-btn`]: {
@@ -262,7 +261,6 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
 export const prepareComponentToken = (token: AliasToken) => ({
   zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
   width: 384,
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
 });
 
 export const prepareNotificationToken: (
diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1de764fe1c01..a32e497476c1 100644
--- a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -88,9 +88,9 @@ Array [
       <div
         class="ant-tour-inner"
       >
-        <span
-          aria-label="Close"
+        <button
           class="ant-tour-close"
+          type="button"
         >
           <span
             aria-label="close"
@@ -112,7 +112,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
         <div
           class="ant-tour-cover"
         >
@@ -260,9 +260,9 @@ Array [
       <div
         class="ant-tour-inner"
       >
-        <span
-          aria-label="Close"
+        <button
           class="ant-tour-close"
+          type="button"
         >
           <span
             aria-label="close"
@@ -284,7 +284,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
         <div
           class="ant-tour-header"
         >
@@ -418,9 +418,9 @@ Array [
       <div
         class="ant-tour-inner"
       >
-        <span
-          aria-label="Close"
+        <button
           class="ant-tour-close"
+          type="button"
         >
           <span
             aria-label="close"
@@ -442,7 +442,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
         <div
           class="ant-tour-cover"
         >
@@ -590,9 +590,9 @@ Array [
       <div
         class="ant-tour-inner"
       >
-        <span
-          aria-label="Close"
+        <button
           class="ant-tour-close"
+          type="button"
         >
           <span
             aria-label="close"
@@ -614,7 +614,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
         <div
           class="ant-tour-cover"
         >
@@ -694,9 +694,9 @@ Array [
       <div
         class="ant-tour-inner"
       >
-        <span
-          aria-label="Close"
+        <button
           class="ant-tour-close"
+          type="button"
         >
           <span
             aria-label="close"
@@ -718,7 +718,7 @@ Array [
               />
             </svg>
           </span>
-        </span>
+        </button>
         <div
           class="ant-tour-header"
         >
@@ -793,9 +793,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -817,7 +817,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-header"
             >
@@ -894,9 +894,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -918,7 +918,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-cover"
             >
@@ -1014,9 +1014,9 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -1038,7 +1038,7 @@ exports[`renders components/tour/demo/render-panel.tsx extend context correctly
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-header"
             >
diff --git a/components/tour/__tests__/__snapshots__/demo.test.tsx.snap b/components/tour/__tests__/__snapshots__/demo.test.tsx.snap
index 75fff3a8c39f..62f1251ffb26 100644
--- a/components/tour/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tour/__tests__/__snapshots__/demo.test.tsx.snap
@@ -342,9 +342,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -366,7 +366,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-header"
             >
@@ -443,9 +443,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -467,7 +467,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-cover"
             >
@@ -563,9 +563,9 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
           <div
             class="ant-tour-inner"
           >
-            <span
-              aria-label="Close"
+            <button
               class="ant-tour-close"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -587,7 +587,7 @@ exports[`renders components/tour/demo/render-panel.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
-            </span>
+            </button>
             <div
               class="ant-tour-header"
             >
diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
index aa8c4d3a4284..4ea2ddf1e264 100644
--- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
@@ -23,9 +23,9 @@ exports[`Tour Primary 1`] = `
         <div
           class="ant-tour-inner"
         >
-          <span
-            aria-label="Close"
+          <button
             class="ant-tour-close"
+            type="button"
           >
             <span
               aria-label="close"
@@ -47,7 +47,7 @@ exports[`Tour Primary 1`] = `
                 />
               </svg>
             </span>
-          </span>
+          </button>
           <div
             class="ant-tour-header"
           >
@@ -228,9 +228,9 @@ exports[`Tour controlled current 1`] = `
         <div
           class="ant-tour-inner"
         >
-          <span
-            aria-label="Close"
+          <button
             class="ant-tour-close"
+            type="button"
           >
             <span
               aria-label="close"
@@ -252,7 +252,7 @@ exports[`Tour controlled current 1`] = `
                 />
               </svg>
             </span>
-          </span>
+          </button>
           <div
             class="ant-tour-header"
           >
@@ -357,9 +357,9 @@ exports[`Tour custom step pre btn & next btn className & style 1`] = `
     <div
       class="ant-tour-inner"
     >
-      <span
-        aria-label="Close"
+      <button
         class="ant-tour-close"
+        type="button"
       >
         <span
           aria-label="close"
@@ -381,7 +381,7 @@ exports[`Tour custom step pre btn & next btn className & style 1`] = `
             />
           </svg>
         </span>
-      </span>
+      </button>
       <div
         class="ant-tour-header"
       >
@@ -453,9 +453,9 @@ exports[`Tour single 1`] = `
         <div
           class="ant-tour-inner"
         >
-          <span
-            aria-label="Close"
+          <button
             class="ant-tour-close"
+            type="button"
           >
             <span
               aria-label="close"
@@ -477,7 +477,7 @@ exports[`Tour single 1`] = `
                 />
               </svg>
             </span>
-          </span>
+          </button>
           <div
             class="ant-tour-header"
           >
@@ -617,9 +617,9 @@ exports[`Tour step support Primary 1`] = `
         <div
           class="ant-tour-inner"
         >
-          <span
-            aria-label="Close"
+          <button
             class="ant-tour-close"
+            type="button"
           >
             <span
               aria-label="close"
@@ -641,7 +641,7 @@ exports[`Tour step support Primary 1`] = `
                 />
               </svg>
             </span>
-          </span>
+          </button>
           <div
             class="ant-tour-header"
           >
diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx
index 726f10b317ac..d7e78658cc14 100644
--- a/components/tour/panelRender.tsx
+++ b/components/tour/panelRender.tsx
@@ -52,9 +52,9 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
     }
 
     return (
-      <span onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
+      <button type="button" onClick={onClose} className={`${prefixCls}-close`}>
         {defaultCloseIcon}
-      </span>
+      </button>
     );
   }, [closable]);
 
diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts
index ba30680d6598..6311267a477d 100644
--- a/components/tour/style/index.ts
+++ b/components/tour/style/index.ts
@@ -1,6 +1,6 @@
 import { TinyColor } from '@ctrl/tinycolor';
 
-import { resetComponent } from '../../style';
+import { resetComponent, genFocusStyle } from '../../style';
 import type { ArrowOffsetToken } from '../../style/placementArrow';
 import getArrowStyle, {
   getArrowOffsetToken,
@@ -33,8 +33,6 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken {
    * @descEN Hover background color of next button in primary type
    */
   primaryNextBtnHoverBg: string;
-  /** @internal */
-  closeBtnHoverBg: string;
 }
 
 interface TourToken extends FullToken<'Tour'> {
@@ -117,7 +115,8 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
             top: padding,
             insetInlineEnd: padding,
             color: token.colorIcon,
-            outline: 'none',
+            background: 'none',
+            border: 'none',
             width: closeBtnSize,
             height: closeBtnSize,
             borderRadius: token.borderRadiusSM,
@@ -129,8 +128,14 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
 
             '&:hover': {
               color: token.colorIconHover,
-              backgroundColor: token.closeBtnHoverBg,
+              backgroundColor: token.colorBgTextHover,
             },
+
+            '&:active': {
+              backgroundColor: token.colorBgTextActive,
+            },
+
+            ...genFocusStyle(token),
           },
 
           [`${componentCls}-cover`]: {
@@ -271,7 +276,6 @@ export const prepareComponentToken: GetDefaultToken<'Tour'> = (token) => ({
   zIndexPopup: token.zIndexPopupBase + 70,
   closeBtnSize: token.fontSize * token.lineHeight,
   primaryPrevBtnBg: new TinyColor(token.colorTextLightSolid).setAlpha(0.15).toRgbString(),
-  closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
   primaryNextBtnHoverBg: new TinyColor(token.colorBgTextHover)
     .onBackground(token.colorWhite)
     .toRgbString(),