diff --git a/src/button/button.vue b/src/button/button.vue
index fc6225a31..a8a3bb4ce 100644
--- a/src/button/button.vue
+++ b/src/button/button.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    v-hover="{ className: `${name}--hover` }"
     :class="buttonClass"
     :disabled="disabled"
     :type="type"
@@ -17,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import { computed, toRefs, defineComponent, getCurrentInstance, h } from 'vue';
+import { computed, toRefs, defineComponent, getCurrentInstance } from 'vue';
 
 import Loading from '../loading';
-import { useEmitEvent, renderContent, renderTNode, TNode } from '../shared';
+import { useEmitEvent, renderContent, renderTNode, TNode, Hover } from '../shared';
 import ButtonProps from './props';
 import config from '../config';
 import { useFormDisabled } from '../form/hooks';
@@ -31,6 +32,7 @@ const name = `${prefix}-button`;
 export default defineComponent({
   name,
   components: { TNode, TLoading: Loading },
+  directives: { Hover },
   props: ButtonProps,
   emits: ['click'],
   setup(props, context) {
diff --git a/src/shared/hover.ts b/src/shared/hover.ts
index 34ac62334..087c65046 100644
--- a/src/shared/hover.ts
+++ b/src/shared/hover.ts
@@ -9,7 +9,7 @@ const Hover = {
   created(el: HTMLElement, binding: DirectiveBinding<BindingObj>) {
     const startTime = 50;
     const stayTime = 70;
-    const { className, active } = binding.value;
+    const { className, active = true } = binding.value;
 
     if (!active) return;