Hover Button

A simple button made with only Tailwind CSS and a little bit of creativity.

import React from "react";
 
export default function hoverButton() {
	return (
		<button className="bg-primary text-bgColor group relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md px-6 font-medium transition duration-300 hover:scale-110">
			<span>Hover me</span>
			<div className="absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]">
				<div className="relative h-full w-8 bg-white/20"/>
			</div>
		</button>
	);
}