<a href="#" class="just">
  <span>One</span>
  <img src="https://assets.website-files.com/60d0b9d684d42a0424dfb8c5/60d0ba000e4b763ca38903e4_btn_arrow.svg" alt=""> </a>

/*
Forum Question answer only:

https://www.sitepoint.com/community/t/anchor-text-span-when-hovered/381073/3

*/

:root {
  --color1: #544e4e;
  --color2: #f1f1f1;
  --color3: #fffdef;
  --hcolor: #332a4f;
  --bgcolor-1: #faf2ff;
  --butshadow: #a093ca;
  --butshadow2: #000000;
}

.just {
  display: inline-flex;
  background-color: var(--bgcolor-1);
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.3rem;
  border: 1px solid var(--hcolor);
  border-radius: 50px;
  box-shadow: 4px 4px var(--butshadow), 5px 5px var(--butshadow2);
  transition: 0.5s;
}
.just:hover {
  box-shadow: 6px 6px var(--butshadow), 7px 7px var(--butshadow2);
}
.just span {
  transition: 0.5s;
  margin-right: 20px;
}
.just:hover span {
  margin-right: 60px;
}

/*
Forum Question answer only:

https://www.sitepoint.com/community/t/anchor-text-span-when-hovered/381073/3

*/