Add "decoration" hover around a link/button.

Hello team!

So, I have a very peculiar question, I don't even know if it's possible on Squarespace in an easy way : 

I am building a new website for a client, and we want to go to a quite spacial first homepage, inspired by video games "Starting" screens. (I attached a screenshot of my Photoshop design and another one of  my inspiration for your understanding. I added a blue arrow to show you what I'm talking about.)

On the Homepage -> hero section, I would like to add links : "Start your new journey", "Credits", and "Options". On hover, 2 icons/arrow symbols (that I will create as .svg) would appear on both sides of the link, like a video game first-screen. Is it possible to do it with Css / html? 

Thank you for your help! I hope it's possible 🙂 

My design ref :

My Vdeo Game inspi screen : 

@Soona Hi! Yes, this can be done with custom code. SVG format isn't supported on Squarespace, so you do need to upload icons or arrow symbols in PNG or other supported formats. Once your homepage hero section is ready, let me know, and I can assist with the necessary custom code. Thank you!

Thanks! So here is my CSS so far (HTML already in the section) you can see what I got here. But as you can see ( https://www.goldensoulholistics.com/home-new ) the icons on both sides only fit the first link, and I would like them to adjust to the width of each link, if possible. Do you have a solution for that? 
Thank you very much 😉 

.game-start-links {
  text-align: center; /* center the links */
}

.link {
  display: block; /* make links block elements to stack them */
  margin: 20px; /* add some space between links */
  position: relative; /* for absolute positioning of icons */
  transition: all 0.3s ease-in-out; /* add a smooth transition effect */
}

.link:hover {
  /* add the icon frames on hover */
  padding: 0 15px; /* add space for the icons */
}

.link:hover:before,.link:hover:after {
  content: ''; /* add an empty content to create the icon frames */
  position: absolute;
  top: 0;
  width: 25px; /* adjust the width to match your icon size */
  height: 100%; /* make the icon frame full height */
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794a48ef95203740740c1a/1719224904594/Icon-Game-left.png'); /* add the left icon */
  background-size: contain;
  background-repeat: no-repeat;
}

.link:hover:before {
  left: 0;
}

.link:hover:after {
  right: 0;
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794d4b4f07162c0d039924/1719225675464/Icon-Game-right.png'); /* add the right icon */
}

On 6/24/2024 at 6:18 PM, Soona said:

Thanks! So here is my CSS so far (HTML already in the section) you can see what I got here. But as you can see ( https://www.goldensoulholistics.com/home-new ) the icons on both sides only fit the first link, and I would like them to adjust to the width of each link, if possible. Do you have a solution for that? 
Thank you very much 😉 

 

.game-start-links {
  text-align: center; /* center the links */
}

.link {
  display: block; /* make links block elements to stack them */
  margin: 20px; /* add some space between links */
  position: relative; /* for absolute positioning of icons */
  transition: all 0.3s ease-in-out; /* add a smooth transition effect */
}

.link:hover {
  /* add the icon frames on hover */
  padding: 0 15px; /* add space for the icons */
}

.link:hover:before,.link:hover:after {
  content: ''; /* add an empty content to create the icon frames */
  position: absolute;
  top: 0;
  width: 25px; /* adjust the width to match your icon size */
  height: 100%; /* make the icon frame full height */
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794a48ef95203740740c1a/1719224904594/Icon-Game-left.png'); /* add the left icon */
  background-size: contain;
  background-repeat: no-repeat;
}

.link:hover:before {
  left: 0;
}

.link:hover:after {
  right: 0;
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794d4b4f07162c0d039924/1719225675464/Icon-Game-right.png'); /* add the right icon */
}

 

I think it already show fine on all three texts. Did you solve it?