<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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.