Cute button arrow transitions on hover news cards

os2ulf · Jul 2, 2024 · 7940d34 · 7940d34
1 parent 0ae0002
commit 7940d34
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/components/base/NewsCard.vue b/components/base/NewsCard.vue
@@ -75,6 +75,14 @@ const cardBodyText: any = ref(stripHtmlFromString(props.data.body) || '');
       transform: scale(1.2);
       transition: transform 5s;
     }
+
+    .news-card__footer-button {
+      opacity: 0.8;
+    }
+
+    .news-card__button-icon {
+      animation: transformArrow 0.5s ease-in-out alternate;
+    }
   }
 
   :deep(img) {
@@ -208,4 +216,15 @@ const cardBodyText: any = ref(stripHtmlFromString(props.data.body) || '');
     }
   }
 }
+@keyframes transformArrow {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>