That said… we actually don’t need to, because there is already a div wrapped around it, and it has a class name 
So, after realizing it and overriding a few properties, voila! Worked like a charm! \
Final code:
<pre><span><style>
/* This is the code for floating buttons container: adjust position, margins, flex, etc */
.fab-target {
flex-direction: row !important;
left:16px !important;
right:16px !important;
bottom:16px !important;
justify-content: space-between;
gap:8px;
}
/* css button of: Prev */
[title="Prev"] {
display: inline;
width:60px;
height: 60px;
order:0;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}
[title="Prev"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}
[title="Prev"] > div > div > svg {
fill: #53B7AD;
}
/* CSS code for "Mark completed" */
/* adjust button component here */
[title="Mark complete"] {
height:60px;
order:1;
flex-grow:4;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}
/* "visible" part of styling goes here */
[title="Mark complete"] > div.floating-btn-style {
background: #53B7AD;
border-radius: 1vw;
}
/* adding text to the middle button */
[title="Mark complete"] > div.floating-btn-style::before {
content: "Mark completed";
color: white;
font-size: 18px;
margin-right: 8px;
font-weight: 600;
}
/* style the icon here */
[title="Mark complete"] > div > div > svg {
fill: white;
width: 23px;
}
/* css button of: Next */
[title="Next"] {
width:60px;
height:60px;
order:2;
margin:0px !important;
filter: drop-shadow(0px 2px 16px rgba(6, 51, 54, 0.1));
}
[title="Next"] > div.floating-btn-style {
background-color: white;
border-radius:1vw;
border: 1px solid #E0E0E0;
}
[title="Next"] > div > div > svg {
fill: #53B7AD;
}