lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
69 lines (59 loc) • 3.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@codewith_muhilan</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>
</style>
</head>
<body class="flex items-center justify-center h-[100vh] bg-black dark:bg-white">
<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">
<button
class="cart-button relative px-4 py-2 w-60 h-14 border-0 rounded-md bg-primarylw outline-none cursor-pointer text-white transition ease-in-out duration-300 overflow-hidden font-bold hover:bg-primarylw-2 active:scale-90 font-primarylw">
<span
class="absolute z-30 left-1/2 top-1/2 text-lg text-white transform -translate-x-1/2 -translate-y-1/2 add-to-cart opacity-100">
Add to cart
</span>
<span
class=" absolute z-30 left-1/2 top-1/2 text-lg text-white transform -translate-x-1/2 -translate-y-1/2 added opacity-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6 fa-solid fa-circle-check">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
Done
</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="size-8 fa-solid cart-shopping-svg absolute z-20 top-1/2 left-[-10%] text-2xl transform -translate-x-1/2 -translate-y-1/2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 167, 4);" viewBox="0 0 448 512"
class="size-5 fas cart-box-svg absolute z-30 top-[-20%] left-[52%] text-xl transform -translate-x-1/2 -translate-y-1/2 ">
<path
d="M50.7 58.5L0 160l208 0 0-128L93.7 32C75.5 32 58.9 42.3 50.7 58.5zM240 160l208 0L397.3 58.5C389.1 42.3 372.5 32 354.3 32L240 32l0 128zm208 32L0 192 0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-224z" />
</svg>
</button>
</div>
</div>
<script>
const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
button.addEventListener('click', cartClick);
});
function cartClick() {
let button = this;
button.classList.add('clicked');
// Reset button position after 3 seconds
setTimeout(() => {
button.classList.remove('clicked');
}, 3000); // 3000 milliseconds = 3 seconds
}
</script>
</body>
</html>