lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
155 lines (132 loc) • 4.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<style>
:root {
--ahb-x: 11.14%;
--ahb-y: 140%;
--ahbspread-x: 150%;
--ahbspread-y: 180.06%;
--ahbcolor-1: #000;
--ahbcolor-2: #08012C;
--ahbcolor-3: #00fffc;
--ahbcolor-4: #00d8d4;
--ahbcolor-5: #13a3a1;
--ahbstop-1: 37.35%;
--ahbstop-2: 61.36%;
--ahbstop-3: 78.42%;
--ahbstop-4: 89.52%;
--ahbstop-5: 100%;
}
@property --ahb-x {
syntax: "<percentage>";
initial-value: 11.14%;
inherits: false;
}
@property --ahb-y {
syntax: "<percentage>";
initial-value: 140%;
inherits: false;
}
@property --ahbspread-x {
syntax: "<percentage>";
initial-value: 150%;
inherits: false;
}
@property --ahbspread-y {
syntax: "<percentage>";
initial-value: 180.06%;
inherits: false;
}
@property --ahbcolor-1 {
syntax: "<ahbcolor>";
initial-value: #000;
inherits: false;
}
@property --ahbcolor-2 {
syntax: "<ahbcolor>";
initial-value: #08012C;
inherits: false;
}
@property --ahbcolor-3 {
syntax: "<ahbcolor>";
initial-value: #00fffc;
inherits: false;
}
@property --ahbcolor-4 {
syntax: "<ahbcolor>";
initial-value: #00d8d4;
inherits: false;
}
@property --ahbcolor-5 {
syntax: "<ahbcolor>";
initial-value: #13a3a1;
inherits: false;
}
@property --ahbstop-1 {
syntax: "<percentage>";
initial-value: 37.35%;
inherits: false;
}
@property --ahbstop-2 {
syntax: "<percentage>";
initial-value: 61.36%;
inherits: false;
}
@property --ahbstop-3 {
syntax: "<percentage>";
initial-value: 78.42%;
inherits: false;
}
@property --ahbstop-4 {
syntax: "<percentage>";
initial-value: 89.52%;
inherits: false;
}
@property --ahbstop-5 {
syntax: "<percentage>";
initial-value: 100%;
inherits: false;
}
.gradientButton {
line-height: 1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: radial-gradient(var(--ahbspread-x) var(--ahbspread-y) at var(--ahb-x) var(--ahb-y), var(--ahbcolor-1) var(--ahbstop-1), var(--ahbcolor-2) var(--ahbstop-2), var(--ahbcolor-3) var(--ahbstop-3), var(--ahbcolor-4) var(--ahbstop-4), var(--ahbcolor-5) var(--ahbstop-5));
text-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0 0 0 1px inset rgba(255, 255, 255, 0.1);
outline: none;
-webkit-tap-highlight-ahbcolor: transparent;
transition: --ahb-x 0.5s, --ahb-y 0.5s, --ahbspread-x 0.5s, --ahbspread-y 0.5s, --ahbcolor-1 0.5s, --ahbcolor-2 0.5s, --ahbcolor-3 0.5s, --ahbcolor-4 0.5s, --ahbcolor-5 0.5s, --ahbstop-1 0.5s, --ahbstop-2 0.5s, --ahbstop-3 0.5s, --ahbstop-4 0.5s, --ahbstop-5 0.5s;
}
.gradientButton:hover {
--ahb-x: 0%;
--ahb-y: 91.51%;
--ahbspread-x: 120.24%;
--ahbspread-y: 103.18%;
--ahbcolor-1: #00fffc;
--ahbcolor-2: #8dfffd;
--ahbcolor-3: #018b89;
--ahbcolor-4: #00fffc;
--ahbcolor-5: #000;
--ahbstop-1: 0%;
--ahbstop-2: 8.8%;
--ahbstop-3: 21.44%;
--ahbstop-4: 71.34%;
--ahbstop-5: 85.76%;
}
</style>
</head>
<body class="h-screen w-full flex items-center justify-center bg-white dark:bg-black">
<button
class="gradientButton relative border-none py-4 px-12 text-lg text-white rounded-lg min-w-[120px] font-bold cursor-pointer">
Get Started
</button>
</body>
</html>