How to have circular button on a card Ionic - ionic4

Question

I would like to have a card that look pretty much like the attached image. It's seems to me that all the button ( circular ones) are on top of a card. I have tried fabs but it doesn't work even if it did i would still encounter the beneath label problem
Edit:
template:
<ion-card class="noSpacing niceAngles" >
<ion-card-content class="noSpacing">
<div class="container">
<div class="scroll" scrollX="true">
<ion-fab-button color="primary">Primary</ion-fab-button>
<ion-fab-button color="secondary">Secondary</ion-fab-button>
<ion-fab-button color="danger">Danger</ion-fab-button>
<ion-fab-button color="light">Light</ion-fab-button>
<ion-fab-button color="dark">Dark</ion-fab-button>
</div>
</div>
</ion-card-content>
</ion-card>
and the scss
.container {
overflow: hidden;
white-space: nowrap;
.scroll {
overflow: auto;
}
ion-chip{
--background:0000ff;
}
&::-webkit-scrollbar {
display: none;
}
}
ion-fab-button {
.fab { display: inline-block !important}
}

Answer 1

i think something like this would do
<ion-row style="padding-bottom:15px;">
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="primary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>primary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="secondary" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>secondary</h4>
</ion-row>
</ion-col>
<ion-col class="ion-text-center" style="background:orangeredg">
<ion-fab-button style="background:blueg;" color="danger" fill="clear" class="ion-text-center">
<ion-icon style="background:redg;" style="fill: white;" [src]="list.image" color="customcolor"></ion-icon>
</ion-fab-button>
<ion-row style="padding-top:10px;">
<h4>danger</h4>
</ion-row>
</ion-col>
</ion-row>