body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.btn {
position: relative;
cursor: pointer;
color: #ffffff;
border-color: #29cb8b;
padding: 12px 15px;
letter-spacing: 2px;
font-size: 14px;
font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important;
font-weight: 600;
text-transform: uppercase;
background-color: #29cb8b;
transition: .1s;
}
.btn::after {
content: "2192";
position: absolute;
top: 50%;
transform: translateY(-50%);
/*We are seeting aerrow to 15px from right side and to hide opacity 0*/
right: calc(0% + 15px);
opacity: 0;
transition: .1s;
}
.btn:hover {
/*To see that movement and roam we are adding 10px extra padding to right side so total 25px*/
padding-right: calc(15px + 10px);
}
.btn:hover:after {
/*We are seeting aerrow to 5px from right side and to make it visiable opacity 1*/
/*10px because (25px(btn rught padding) - 15px(right side space of aerrow))*/
right: calc(0% + 10px);
opacity: 1;
}<a class="btn">button</a>.