Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Jacqlaire

customising text button on images

Question

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

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

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

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

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 🙂

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...