customising text button on images

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
@capecabin

@Jacqlaire Can you public the take a look around section? I accessed your site and can't find.

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 🙂

@Jacqlaire You can add image block first, then i can give you css to style the button.

@tuanphan Ive just changed the image settings to poster with image link on button and it currently looks like this...

@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;
}

@tuanphan thank you so much - this worked perfectly! 🙏👌

@tuanphan - is there a way that I can change the font size and background width? I tried adding font-size: px; to the code but it didn't seem to work 🙂

@Jacqlaire add font-size: 20px !important; to second code.

and width: 100px !important; to first code