CODEWITHSUNDEEP
ionic-frameworkionic4
Programmer Man
Programmer Man

Reputation: 1305

Change Round css in IONIC 4

I have a button with shape round as follows:

<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>

The class shadow-red is:

.shadow-red{
    box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
    border-radius: 5px;
}

And the result is:

enter image description here

So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.

.round{
  border-radius:5px!important;
}

I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.

I have also tried to add to variables.css the following lines and none of them worked:

--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....

Upvotes: 10

Views: 16346

Answers (3)

KATJ Srinath
KATJ Srinath

Reputation: 970

Posting here for future references.

If you want to change the ionic button radius we can use following css. it is working on expand="block" attribute

ion-button {
  --border-radius: 20px;
  border-radius: 20px;
}

But in ionic button, when we use expand="full" attribute it does not work. so to overcome this limitation we can use CSS Pseudo-elements.

to add a border radius to the bellow button

<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>

as bellow image we need to select the native element within the shadow DOM

enter image description here

we can use below Pseudo-elements selector

 ion-button::part(native) {
    --border-radius: 20px;
    border-radius: 20px;
}

above will add the radius on the ionic button with expand="full" attribute

Upvotes: 0

rakesh kumar
rakesh kumar

Reputation: 1

Following code worked for me. As per your need change the height and width value to meet your requirement.

<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
    <ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>

Upvotes: 0

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3868

Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.

<ion-button expand="block" class="shadow-red">Signup with</ion-button>

Use the following CSS custom properties as described in the Ionic 4 docs.

.shadow-red{
    --border-radius: 5px;
    --box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}

Result:

enter image description here

Upvotes: 18

Related Questions