style: polish enter button with gradient, inner highlight, arrow icon, and premium hover effects
This commit is contained in:
1 parent
d7138f3a32
commit
d588ae5f0f
1 file changed
+5
-4
+5
-4
@@ -237,15 +237,16 @@ export default async function HomePage() {
|
|||||||
<Link href="/client">
|
<Link href="/client">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="rounded-full px-6 py-2.5 text-sm font-bold tracking-wide transition-all duration-200 hover:scale-105"
|
className="group rounded-full px-7 py-3 text-sm font-bold tracking-wider transition-all duration-300 hover:scale-105 active:scale-95"
|
||||||
style={{
|
style={{
|
||||||
background: "var(--button-color)",
|
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 92%, white), color-mix(in srgb, var(--color-primary) 92%, black))",
|
||||||
color: "var(--button-text-color)",
|
color: "var(--button-text-color)",
|
||||||
border: "none",
|
border: "1px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.2))",
|
||||||
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.2)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Enter {hotelName}
|
Enter {hotelName}
|
||||||
|
<svg className="inline-block ml-2 w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" /></svg>
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user