Flare Button

Flare button expanding hover effect

by AntowaKartowa

HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS animatin, transitions and transforms</title>

</head>

<body>

  <a href="#">Hover Me</a>

</body>
</html>

CSS

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #222;
}

a {
	text-decoration: none;
	color: white;
	font-family: sans-serif;
	font-size: 40px;
	border: 3px solid white;
	padding: 40px 80px;
	position: relative;
	overflow: hidden;
}

a:before {
	content: '';
	background-color: #F44336;
	top: 0;
	left: -120px;
	width: 120px;
	height: 100%;
	position: absolute;
	z-index: -1;
	transform: skew(-15deg) translateX(-50%);
	animation: moving 1.2s linear infinite;
	animation-play-state: running;
	transition: width .5s;
}

@keyframes moving {

	from { left: -30% }

	to 	{ left: 125% }

}

a:hover:before {
	width: 260%;
	animation-play-state: paused;
}