How to have circular button on a card Ionic

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>
Copy

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}
  }
Copy

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> 

Copy