Let Button overlap div on bottom (CSS/Bootstrap 4 Grid) - html

Question

I need your help in the following case - I just cant figure out a clean and simple way to solve it.
I want to realize the following design:
3 Boxes with content and overlapping buttons
But i struggle with pushing the buttons out of the divs because it expands the main div or I cant get them centered / positioned properly in mobile views. My current code looks like this (based on bootstrap 4 grid) (Light blue background is applied at the div with container-fluid class in the 2nd row)
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<a class="btn btn-darkblue align-self-baseline" href="#" role="button">Mehr erfahren</a></div>
</div>
</div>
</div>
</section>
I was thinking about adding three aditional cols underneath the div with the background, but then there are problems with responsive views, where the buttons should be in the boxes again and not underneath all three off them.
So this dirty solution would look like this:
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
<div class="col p-5 d-flex flex-column">
<h3 class="pb-2">HEADLINE</h3> Content goes here
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
<div class="col"><a class="btn btn-darkblue align-self-baseline pushback" href="#" role="button">Mehr erfahren</a></div>
</div>
</div>
</section>
So any idea how to get them to this position where I can change the position for different breakpoints?
Thanks in advance!

Answer 1

Here's a solution, where the buttons are inside the three boxes, but have absolute positioning that forces them to spill outside the bottom of the div by around half.
<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div id="box1" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box2" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box3" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
</div>
</div>
</div>
</section>
CSS
.headlineBox button{
background-color: #466f75;
color: #fff;
position: absolute;
bottom: -10px;
margin:0 auto;
display:block;
}
#box1{
background-color: #e6f4f6;
}
#box2{
background-color: #d8eef1;
}
#box3{
background-color: #e6f4f6;
}
Codepen https://codepen.io/Washable/pen/bYwGzR