diff --git a/packages/search-pro/src/client/components/SearchBox.ts b/packages/search-pro/src/client/components/SearchBox.ts
index 9c9420466aa3..f0762028fcf5 100644
--- a/packages/search-pro/src/client/components/SearchBox.ts
+++ b/packages/search-pro/src/client/components/SearchBox.ts
@@ -37,7 +37,7 @@ export default defineComponent({
 
     return (): (VNode | null)[] => [
       h(
-        "div",
+        "button",
         {
           class: "search-pro-button",
           role: "search",
diff --git a/packages/search-pro/src/client/styles/search-box.scss b/packages/search-pro/src/client/styles/search-box.scss
index f434a7abc052..3d76bff91e66 100644
--- a/packages/search-pro/src/client/styles/search-box.scss
+++ b/packages/search-pro/src/client/styles/search-box.scss
@@ -1,11 +1,15 @@
-.search-pro-button {
-  inset-inline-start: 16px;
+@use "vuepress-shared/styles/reset";
 
+.search-pro-button {
+  @include reset.button;
   display: inline-block;
 
+  box-sizing: content-box;
+
   width: 20px;
   height: 20px;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
   padding: 8px;
   border: 0;
   border-radius: 50%;
@@ -19,6 +23,8 @@
   transition: background var(--t-color, 0.3s ease),
     color var(--t-color, 0.3s ease);
 
+  margin-inline: 16px 0;
+
   @media print {
     display: none;
   }