diff --git a/src/index.scss b/src/index.scss
index 8a9fe63..029ebb8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -120,6 +120,12 @@ $primary-color: #1284e7;
   line-height: 34px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   .mx-shortcuts {
+    background: none;
+    outline: none;
+    border: 0;
+    color: inherit;
+    margin: 0;
+    padding: 0;
     white-space: nowrap;
     cursor: pointer;
     &:hover {
diff --git a/src/index.vue b/src/index.vue
index f11d25c..082b7dd 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -49,11 +49,12 @@
       <slot name="header">
         <div class="mx-shortcuts-wrapper"
           v-if="range && innnerShortcuts.length">
-          <span
+          <button
+            type="button"
             class="mx-shortcuts"
             v-for="(range, index) in innnerShortcuts"
             :key="index"
-            @click="selectRange(range)">{{range.text}}</span>
+            @click="selectRange(range)">{{range.text}}</button>
         </div>
       </slot>
       <calendar-panel