How to customise a button on an image block in 7.1

Site URL: https://nicolaomara.squarespace.com/home

Hi everyone! I'm looking to customise some buttons on a page on a site I'm currently working on https://nicolaomara.squarespace.com/home (still in trial mode atm). I'd like to create something like the image below, do I either, a) Add custom css to an image block, or b) position a button so that it overlaps the top edge of the image? Would really appreciate some advice and help with coding as I'm not very confident with css.

Thanks!

Hi. What is access password?

Sorry @tuanphan, password is: seagreen1

21 hours ago, designroomcornwall said:

Sorry @tuanphan, password is: seagreen1

Add to Design > Custom CSS

/* buttons overlap */
div#page-section-609be0d2ffa91a64632e310e figcaption {
    align-items: flex-start;
}
div#page-section-609be0d2ffa91a64632e310e .image-button a {
    position: relative;
    top: -25px;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* buttons overlap */
div#page-section-609be0d2ffa91a64632e310e figcaption {
    align-items: flex-start;
}
div#page-section-609be0d2ffa91a64632e310e .image-button a {
    position: relative;
    top: -25px;
}

 

Thank you that's great! Is it possible to style just those two buttons to look more like my mockup? White with black text and a thin black border.

Use this code

/* buttons overlap */
div#page-section-609be0d2ffa91a64632e310e figcaption {
    align-items: flex-start;
}
div#page-section-609be0d2ffa91a64632e310e .image-button a {
    position: relative;
    top: -25px;
    border: 1px solid black;
    background-color: white;
    color: black;
}