Modal buttons with same style alert buttons

Ionic Framework ionic-v3
1

I made a custom modal with a select and a couple of date pickers. I added 2 buttons (cancel, save) and I want to style them like alert buttons.

I tried to use alert classes, but id did not work:

<div class="alert-button-group">
        <button ion-button class="alert-button" (click)="close()">Cancel</button>
        <button ion-button class="alert-button alert-button-default" (click)="save()">Save</button>
</div>

Here is how they are actually:
image

Here is how I would like them to look:
image

Need I to recreate all css of alert buttons or I can apply their styles using default classes?

1 Like
2

Remove ion-button, and put these styles to your button.

border-radius: 2px;

margin-left: 0;

margin-right: 8px;

margin-top: 0;

margin-bottom: 0;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

padding-bottom: 10px;

position: relative;

background-color: transparent;

color: var(--ion-color-primary, #3880ff);

font-weight: 500;

text-align: end;

text-transform: uppercase;

overflow: hidden;