Jump to content

FOR CUSTOM BUTTONS - Hover on photo works but can't link it to my other page

Go to solution Solved by Ziggy,

Recommended Posts

Hello!

I am having a problem using a custom-made button with hover effect. It should be able to link to my other pages just like a normal button. Can you help me?

This is the code that I am using for VIEW ALL button:

#block-yui_3_17_2_1_1690872033088_65911:hover {
    content: url("#block-yui_3_17_2_1_1690872033088_65029")

VIEW ALL should be linked to:

shiftnow.org/now

Thanks!

Karen

Link to comment

Are you using buttons or image blocks? Why are you using CSS to add a block to another block on hover?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, karebear said:

Any idea how to add a link to this?

You can add a link to an image, have you tried that?

You could achieve this with a button and a small amount of CSS, which would save trying to deal with all of the issues you have with the layout shift, and management of this later.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy,

I have tried adding links directly on both images but it still does not work.

I know this is not ideal. I don't have a web development background. I do mostly creative direction but gotta cover this work cos we made a mistake creating the whole website from scratch. So this is the second round.

Appreciate it if you have some insights and solutions for this.

Edited by karebear
Link to comment

If you can add a button to the website (set to FIT not FILL) and quickly style it with the pink color and border, also the right padding, I will give you some code to style it and add a hover effect.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you go into the Style Menu and adjust the font to be the correct size, and also set it to have a background color rather than transparent?

Also adjust the padding to look correct?

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Great! Now add this to Custom CSS:

#siteWrapper.site-wrapper .sqs-button-element--secondary {
  padding: 0.6em 1.6em;
  font-family: 'Graphik Black';
  font-size: 1.8rem;
  letter-spacing: -1px;font-weight: 900;
  border:1px solid black;
  box-shadow:6px 6px black;
  transform:rotate(-4deg);
  transition:ease-in-out 300ms;
  &:hover {
    background-color:#302798;
    opacity:1.0 !important;
    transform:rotate(-2deg);
  }
}

 

25 minutes ago, karebear said:

I am using a custom font called Graphik ExtraBold

Is this uploaded to the website?

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
Just now, karebear said:

Yes, Graphik ExtraBold is uploaded to the site.

Then you should be able to add that to the code I gave you, let me know if you have any problems with that.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I've just updated the code since you changed the button settings from Primary to Secondary.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

There was an opacity built in, I changed my original code.

You can delete:

background-color:100%;
and
font-weight:0;

I would also suggest that you make the button block wider, i.e. cover more columns.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, karebear said:

YOU ARE THE BEST! ❤️
Thank you, Ziggy!

Happy to help, thanks for marking my post as the solution.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.