Button Hover

	<!DOCTYPE html>
	<html>
	<head>
	<title>Button</title>
	</head>
	<body>

	<button class="button">
	continue
	<span></span>
	</button>

	</body>
	</html>

	<style type="text/css">
	*{box-sizing: border-box;}
	body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	}

	button{
	border: none;
	display: block;
	position: relative;
	padding: 0.5em 2.2em;
	font-size: 25px;
	background-color: transparent;
	cursor: pointer;
	user-select: none;
	color: royalblue;
	overflow:hidden;
	}

	button span{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: -1;
	border: 5px solid royalblue;
	}
	.button span::before{
	content: '';
	position: absolute;
	width: 8%;
	height: 500%;
	background-color: white;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-60deg);
	transition: all 0.3s;
	}
	button:hover span::before, .button:focus span::before{
	transform: translate(-50%, -50%) rotate(-90deg);
	width: 100%;
	background-color: royalblue;
	}
	button:hover, .button:focus{color: #fff;}
	</style>

Code Design html