Bottom aligning a button on a poster block in 7.1

Site URL: https://wolf-green-e5sr.squarespace.com/join

Hi I have four image poster blocks and I am trying to drop the buttons from the center of the block down near the bottom. of the poster block. This is for a clients site so I was wondering if someone can help me 

19 hours ago, kf_creative said:

Site URL: https://wolf-green-e5sr.squarespace.com/join

Hi I have four image poster blocks and I am trying to drop the buttons from the center of the block down near the bottom. of the poster block. This is for a clients site so I was wondering if someone can help me 

Have you tried in Home > Pages > Edit > Image Block yet? Get a reference from my below video

Thats exactly what I did, but what I need to do is bottom align the button to the image. I tried to figure it out with CSS but in squarespace, I dont know what they use as a  div class to identify the image poster block. I figured it out be something like adding a css to override the position. I am also just learning CSS. Maybe something like this?

.image-block-button {

        margin-top: 500px !important;

}

7 minutes ago, kf_creative said:

Thats exactly what I did, but what I need to do is bottom align the button to the image. I tried to figure it out with CSS but in squarespace, I dont know what they use as a  div class to identify the image poster block. I figured it out be something like adding a css to override the position. I am also just learning CSS. Maybe something like this?

.image-block-button {

        margin-top: 500px !important;

}

 

I 've taken a look on your site. The button is under the description, not inside the image. Have you added any code/ Custom Css yet?

If possible, can you remove your configuration related to this section before?

yeah I had to change that for a client meeting i'm having this afternoon and for the time being while I try to get help on this. what we want is what is attached. I just photoshopped this screenshot just to convey the clients ask. 

What I need to know is how is this achieve-able with css

and no css has been added yet. I have to leave the page the way it is for the time being as this page will be launching tomorrow, but the css integration will be added at a further date

5 hours ago, kf_creative said:

and no css has been added yet. I have to leave the page the way it is for the time being as this page will be launching tomorrow, but the css integration will be added at a further date

I found that in your last image, we could reposition as you require with the following Css

#block-yui_3_17_2_1_1632771547750_53624 .image-button-inner {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}

Can you set the other image by the same way with this one? In that way, we config for all button more easily

Here is the result for last image

In addition, you can move the button up or down by changing the bottom value in Css

Yeah this works! I managed to find a really good squarespace tool that tells you the id number of each feature and if i replace the id number it works for all of them. 

My only question left is if you have a donate button, you can't attach it to a regular button and still get the functionality of donating denominations. Is there a way to do that?