HTML
<html>
<head>
<title>Button Demo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="header-wrapper">
<div class="header-button">
<a href="#" class="btn-click">Click Me</a>
</div>
</div>
</header>
</body>
</html>
CSS
header{
background-color: #05ffb0;
padding: 100px;
text-align: center;
vertical-align: center;
}
.btn-click{
display: inline-block;
padding: 15px 50px;
border: 2px solid #FD6F96;
border-radius: 0px;
color: #628395;
font-size: 20px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.05em;
position: relative;
transition: all 0.5s ease-in-out;
background-image: linear-gradient(to right, #FD6F96 50%, transparent 50%);
background-size: 200% 200%;
background-position: right;
transition: background-position 0.5s ease-in-out;
background-clip: padding-box;
}
.btn-click:hover{
background-position: left;
color: #fff;
}