Button Color

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

	<div class="contianer">
	<a href="#"><span>Read More</span></a>
	<a href="#"><span>Read More</span></a>
	</div>


	<style type="text/css">
	*{margin: 0px; padding: 0px; font-family: arial;}
	.contianer{ min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;}
	.contianer a{ position: relative; width: 300px; height: 75px; margin: 10px 0px; font-size: 24px; display: inline-flex; justify-content:center; align-items: center; text-decoration: none; transition: 0.5s; color: #000;}
	.contianer a:hover{color: #fff;}
	.contianer a:before{content: ''; position: absolute; top:0px; left: 0px; width: 0; height: 100%; background: url(btn-bg1.png); background-size: cover; transform-origin: left; transition: 0.5s;}

	.contianer a:nth-child(2):before{ background: url(btn-bg2.png); background-size: cover;}
	.contianer a span{position: relative; z-index: 1;}
	.contianer a:hover:before{width: 100%;}
	</style>
	</body>
	</html>

Code Design html