mirror of https://github.com/VERT-sh/VERT.git
apply hoverable to .btn
use @apply hoverable to .btn use hoverable on images
This commit is contained in:
parent
ec8d8900c0
commit
839d129cab
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue