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?

I'm having trouble fitting the space but I'll manage 😉 thank you !

On 6/24/2024 at 4: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 */
}

 

On 10/21/2024 at 3:56 PM, JoeRoot2 said:

 

Page doesn't work. Can you check again?

To add a decorative hover effect around a link or button, you can use CSS. Here's a simple example:

<a href="#" class="decorative-link">Hover Me!</a>  

<style>  
.decorative-link {  
    position: relative;  
    color: #000;  
    text-decoration: none;  
    padding: 10px 20px;  
    display: inline-block;  
}  

.decorative-link::before {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    border: 2px solid #000;  
    border-radius: 5px;  
    transition: transform 0.3s ease;  
    transform: scale(0.9);  
}  

.decorative-link:hover::before {  
    transform: scale(1.1);  
}  
</style>  

How It Works:

1. Positioning with ::before:

   • The ::before pseudo-element creates a decorative border around the link.
   • It is positioned absolutely within the link's boundaries.

2. Hover Animation:

   • The transform: scale() property is used to create a zoom effect when the link is hovered over.
   • The transition makes the animation smooth.

You can adjust the border style, color, or the scale() value to customize it further.

Let me know if you need help applying this! 

I also apply this method for my site. www.thetocaboca.com