Jump to content

customising text button on images

Recommended Posts

Hi there,

I am wanting to create a Transperant text button on the image blocks of a single page (www.capecabin.com/thespace) so that it matches the 'take a look around' button used over a banner image on our homepage. Could anyone point me in the direction of the css code to achieve this? I would prefer the buttons to be fixed rather than visible on hover as I think I need to make it as clear as possible that you can click through to see more.

x Jacqueline

Screen Shot 2019-10-24 at 9.17.42 am.png

Screen Shot 2019-10-24 at 9.20.04 am.png

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Hi @tuanphan,

the existing button that I am wanting to duplicate is on the homepage (www.capecabin.com) on the second banner image down. I have used the large button in style editor to achieve this but I haven't been able to figure out how to do a similar thing over the top of image blocks. thanks for your help 🙂

Link to comment

@Jacqlaire Add to Home > Design > Custom CSS

body#collection-5d9d591538dca21e46f8ef20 .image-button-inner.min-font-set {
    background: rgba(191,133,125,.46);
    border: rgba(191,133,125,.46);
    text-align: center;
body#collection-5d9d591538dca21e46f8ef20 .image-button-inner.min-font-set a {
    color: #fff;
    font-weight: bold;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • 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.