<nav class="menu">
  <a href="#">Visit My Website</a>
  <a href="#">My Services</a>
  <a href="#">Join My Facebook Group</a>
  <a href="#">Spotify Focus Playlist</a>
</nav>
/*
Forum Question answer only:

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

*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
:root {
  --color1: #544e4e;
  --color2: #f1f1f1;
  --color3: #fffdef;
  --hcolor: #332a4f;
  --bgcolor-1: #faf2ff;
  --butshadow: #a093ca;
  --butshadow2: #000000;
}
.menu {
  display: flex;
  width: 50%;
  margin: auto;
  flex-direction: column;
}
.menu a {
  display: flex;
  width: calc(100% - 60px);
  background: url(https://assets.website-files.com/60d0b9d684d42a0424dfb8c5/60d0ba000e4b763ca38903e4_btn_arrow.svg)
    no-repeat 95% 50%;
  background-color: var(--bgcolor-1);
  padding: 10px 63px 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;
  margin: 0 0 1rem;
  white-space: nowrap;
}
.menu span {
  flex: 1 0 0;
}
.menu a:hover {
  box-shadow: 6px 6px var(--butshadow), 7px 7px var(--butshadow2);
  width: 100%;
}
@media screen and (max-width: 800px) {
  .menu {
    width: 100%;
  }
  .menu a {
    white-space: normal;
    font-size: 1rem;
    background-size: 20px;
    padding-right: 25px;
    width: calc(100% - 30px);
  }
}
/*
Forum Question answer only:

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

*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.