1 files changed, 19 insertions, 19 deletions
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dfe12f86..d54ae78c 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,20 @@
 <template>
-  <div v-if="loggedIn">
-    <FAIcon
-      :class="classes"
-      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+  <div>
+    <button
+      v-if="loggedIn"
+      class="FavoriteButton -interactive button-unstyled -padded"
+      :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
-      :icon="[status.favorited ? 'fas' : 'far', 'star']"
-      :spin="animated"
       @click.prevent="favorite()"
-    />
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
-  </div>
-  <div v-else>
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
+        :spin="animated"
+      />
+    </button>
     <FAIcon
-      :class="classes"
+      v-else
       class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
@@ -28,18 +30,16 @@
 
 .FavoriteButton {
   &.-interactive {
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
   }
-
-  &.-favorited {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
-  }
 }
 </style>