react-hover-fill-button/src/index.js

React button with a fill animation on hover

import React from 'react';
import PropTypes from 'prop-types';
import styled from "styled-components";

const Filler = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: ${props => props.fillBackground || "red"};
	color: ${props => props.fillTextColor || "white"};
	clip-path: polygon(0 0, -65% 0, 0% 100%, 0% 100%);
	transition: clip-path 0.5s;
`;

const Button = styled.button`
	border: ${props => props.borderWidth || "2px"} solid ${props => props.fillBackground || "red"};
	background: ${props => props.background || "white"};
	color: ${props => props.textColor || "black"}
	position: relative;

	&:hover ${Filler} {
		clip-path: polygon(0 0, 100% 0, 165% 100%, 0% 100%);
	}
`;

const HoverFillButton = ({ children, className, style, ...props }) => {
	return (
		<Button {...props}>
			<Filler {...props}>{children}</Filler>
			{children}
		</Button>
	)
};

HoverFillButton.propTypes = {
	children: PropTypes.node.isRequired,
	className: PropTypes.string,
	fillBackground: PropTypes.string,
	background: PropTypes.string,
	textColor: PropTypes.string,
	fillTextColor: PropTypes.string,
	borderWidth: PropTypes.string
}

export default HoverFillButton;