JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <button class="btn btn--dir_left">btn 1</button>
  <button class="btn btn--dir_right">btn 2</button>
</div>

CSS

.block {
  max-width: 200px;
  padding: 40px;
  position: relative;
  background-color: red;;
}

.btn {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	display: block;
	width: 44px;
	height: 44px;
	background-color: blue;
	color: #ffffff;
	border: none;
	outline: none;
	transition: 0.5s opacity;
}

.btn--dir_left:after,
.btn--dir_right:after {
	position: absolute;
	content: ' ';
	width: 10px;
	height: 10px;
	top: calc(50% - 5px);
	left: calc(50% - 3px);
	border-left: 2px solid #6B6C70;
	border-top: 2px solid #6B6C70;
	transform: rotate(-45deg);
}

.btn--dir_right {
	right: 0px;
	transform: translateY(-50%) scaleX(-1);
}

.block:hover .btn--dir_left,
.block:hover .btn--dir_right{
  opacity: 1;
  visibility: visible;
}

.block .btn--dir_left,
.block .btn--dir_right{
  opacity: 0;
  visibility: visible;
}