How to stylize radio buttons in ionic

Ionic Framework ionic-v3
1

Hi everyone,

I’m facing a problem with the style of radio buttons in my app. I have multiple slides which contains multiples radio buttons and i want them to look like this :

image

But i only succed to do this :

image
image.png710×258 10.6 KB

Here is my ion-content code :

<ion-content>
    <ion-grid>

        <ion-row>
            <h1 class="title">{{ subcategory.name | uppercase }}</h1>
        </ion-row>

        <ion-row>
            <ion-slides>
                <ion-slide *ngFor="let question of questions; let i=index">
                    <ion-row><h1 class="subtitle">{{ question.question }}</h1></ion-row>
                    <ion-row col-10 offset-1 radio-group>
                        <ion-item text-wrap text-center class="response-button" *ngFor="let response of responses" no-lines col-3>
                            <ion-label>{{ response.response}}</ion-label>
                            <ion-radio (ionSelect)="onSelectionChange(question, response)" value="{{response.id_response}}"></ion-radio>
                        </ion-item>
                    </ion-row>
                </ion-slide>
            </ion-slides>
        </ion-row>
        
    </ion-grid>
</ion-content>

And here is my scss :

   .response-button{
        border-radius: 8px;
        background-color: #bdd88c;
        color: #6a962f;
        text-align: center;
        height:130px;
    }

I tried many things but one time i can’t check the buttons, another time i not able to see any text inside labels…maybe my structure is wrong but i don’t know what to do.

Thanks in advance,

Ben