lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
50 lines (44 loc) • 1.91 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"> -->
<!-- <link rel="stylesheet" href="../../../../node_modules/lightwind/tailwind.css"> -->
<style>
/* Custom gradient animation */
@keyframes animated-gradient-border-spin {
to {
--border-angle: 1turn;
}
}
.animated-gradient-border-button {
--border-angle: 0turn;
background: conic-gradient(from var(--border-angle), #000, #000) padding-box,
conic-gradient(from var(--border-angle), transparent 25%, #08f, rgb(1, 206, 46) 99%, transparent) border-box;
animation: animated-gradient-border-spin 3s linear infinite;
}
/* Ensure hover pauses animation */
.animated-gradient-border-button:hover {
animation-play-state: paused;
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
</style>
</head>
<body class="h-screen bg-gray-100 dark:bg-black grid place-items-center font-primarylw">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl ">
<div class="relative text-center flex items-center justify-center flex-wrap gap-4">
<div
class="animated-gradient-border-button px-10 py-4 grid place-content-center rounded-full text-white dark:text-gray-300 text-shadow-md border-[5px] border-transparent cursor-pointer">
Animated Button
</div>
</div>
</div>
</body>
</html>