Button

import { DetailedHTMLProps, InputHTMLAttributes } from "react";

export default function Button({ className, ...others }: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
	const cls = (className || '') + ' btn';
	return <>
		<input className={cls} {...others} type='button' />
		<style jsx>{`
.btn{
	color:#fff;
	background-color: #1890ff;
	transition: all 600ms;
	padding: 0.5rem 1rem;
	border-style: none;
	border-radius: 0.4rem;
	line-height: 1.3rem;
	transition: all 0.6s;
}
.btn:hover,.btn:focus,.btn:active{
	background-color: #0081cbc9;
}
`}</style>
	</>;
}

	<>
		<input className='btn' type='button' value='Test button' />
		<style jsx>{`
.btn{
	color:#fff;
	background-color: #1890ff;
	transition: all 600ms;
	padding: 0.5rem 1rem;
	border-style: none;
	border-radius: 0.4rem;
	line-height: 1.3rem;
	transition: all 0.6s;
}
.btn:hover,.btn:focus,.btn:active{
	background-color: #0081cbc9;
}
`}</style>
	</>