diff --git a/resources/assets/js/vue-components/common/HeartCircleButton.vue b/resources/assets/js/vue-components/common/HeartCircleButton.vue
index 97cdebf0..6bc82751 100644
--- a/resources/assets/js/vue-components/common/HeartCircleButton.vue
+++ b/resources/assets/js/vue-components/common/HeartCircleButton.vue
@@ -64,7 +64,7 @@ export default {
 	padding: 0;
 
 	&:hover {
-		opacity: 0.8;
+		filter: brightness(90%);
 		cursor: pointer;
 	}
 }
diff --git a/resources/assets/js/vue-components/common/ShareCircleButton.vue b/resources/assets/js/vue-components/common/ShareCircleButton.vue
index a6addae9..0adc788e 100644
--- a/resources/assets/js/vue-components/common/ShareCircleButton.vue
+++ b/resources/assets/js/vue-components/common/ShareCircleButton.vue
@@ -49,7 +49,7 @@ export default {
 	padding: 0;
 
 	&:hover {
-		opacity: 0.8;
+		filter: brightness(90%);
 		cursor: pointer;
 	}
 }