JSFiddle - React, Tailwind, and code Playground

HTML

<a class="btn" href="#">
	<span class="txt">Кнопка</span>
	<span class="ico">
		<img src="https://i.postimg.cc/yxWQmQwP/i-backet.png" alt="">
	</span>
</a>

CSS

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 300px;
	height: 40px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #FFCC00;
	color: #000;
	text-decoration: none;
	font-family: arial;
	font-size: 16px;
	font-weight: bold;
	transition: all .5s ease-out;
}
.txt,
.ico {
	margin-left: auto;
}
.ico {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 36px;
	height: 36px;
	background: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-right: 2px;
}
.btn:hover .txt {
	margin-left: 0;
}
.btn:hover .ico {
	margin-left: 5px;
	margin-left: 0px;
  background: transparent;
}





body,html {
	width: 100%;
	height: 100%;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
}