Add group-hover effect for all posts button

This commit is contained in:
Sat Naing
2022-09-10 15:02:07 +06:30
parent 870911d2c6
commit 8b726cbfa7
+8 -3
View File
@@ -108,9 +108,11 @@ const sortedPosts = posts.sort(
} }
</ul> </ul>
<div class="all-posts-btn-wrapper"> <div class="all-posts-btn-wrapper">
<a type="button" href="/posts"> <a type="button" href="/posts" class="group">
All Posts All Posts
<svg xmlns="http://www.w3.org/2000/svg" <svg
xmlns="http://www.w3.org/2000/svg"
class="group-hover:fill-skin-accent"
><path ><path
d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
></path> ></path>
@@ -163,7 +165,10 @@ const sortedPosts = posts.sort(
.all-posts-btn-wrapper { .all-posts-btn-wrapper {
@apply text-center my-8; @apply text-center my-8;
} }
.all-posts-btn-wrapper a {
@apply hover:text-skin-accent;
}
.all-posts-btn-wrapper svg { .all-posts-btn-wrapper svg {
@apply inline-block w-6 h-6 fill-skin-base hover:fill-skin-accent; @apply inline-block w-6 h-6;
} }
</style> </style>