apply hoverable to .btn

use @apply hoverable to .btn
use hoverable on images
This commit is contained in:
JovannMC 2025-01-01 18:14:37 +03:00
parent ec8d8900c0
commit 839d129cab
No known key found for this signature in database
3 changed files with 9 additions and 9 deletions

View File

@ -149,7 +149,7 @@ body {
}
.btn {
@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
@apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none hoverable;
transition:
opacity 0.2s ease,
transform 0.2s ease,

View File

@ -16,7 +16,7 @@
src={avatar}
alt={name}
title={name}
class="w-9 h-9 rounded-full hoverable-lg"
class="w-9 h-9 rounded-full"
/>
<p class="text-sm text-black dynadark:text-white px-4">${amount}</p>
</div>
@ -47,22 +47,22 @@
</button>
<button
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
class="btn flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
>
<CalendarHeartIcon size="24" class="inline-block mr-2" />
Monthly
</button>
</div>
<div class="flex gap-3 w-full">
<button class="bg-rose-300 text-black p-4 rounded-lg flex-1 hoverable-md"
<button class="btn bg-rose-300 text-black p-4 rounded-lg flex-1"
>$1 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1 hoverable-md"
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$5 USD</button
>
<button
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1 hoverable-md"
class="btn bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
>$10 USD</button
>
<div class="relative flex items-center flex-[2]">
@ -82,7 +82,7 @@
</p>
<button
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center hoverable"
class="btn flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
>
<WalletIcon size="24" class="inline-block mr-2" />
Pay now

View File

@ -17,7 +17,7 @@
href="https://discord.gg/kqevGxYPak"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<MessageCircleMoreIcon size="24" class="inline-block mr-2" />
Discord server
@ -26,7 +26,7 @@
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable"
class="btn flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source code