mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
22 lines
1.2 KiB
HTML
22 lines
1.2 KiB
HTML
<!-- From Uiverse.io by Creatlydev - Tags: button, hover effect, click effect, tailwind, tailwindbutton -->
|
|
<button class="shadow shadow-red-300 cursor-pointer overflow-hidden text-white bg-red-600 px-4 py-3 group active:shadow-green-200 focus:outline-none rounded flex items-center justify-center relative gap-4">
|
|
|
|
<span class="group-hover:-translate-x-40 transition-transform duration-200">REMOVE</span>
|
|
|
|
<div class="w-0.5 h-6 bg-red-800 group-hover:-translate-x-40 transition-transform duration-200"></div>
|
|
|
|
<div class="svg-wrapper group-hover:-translate-x-11 transition-transform duration-200">
|
|
<svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 18L18 6M6 6l12 12" stroke-linejoin="round" stroke-linecap="round"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="svg-wrapper group-active:bg-green-600 group-active:flex hidden absolute w-full h-full flex items-center justify-center">
|
|
<svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</button>
|
|
|