CODEWITHSUNDEEP
cssangularionic-frameworkbutton
Sam
Sam

Reputation: 29

Remove border from ion-button

I am building an Ionic App. I have rounded the buttons in order to make them more beautiful, but when I do that the border stays just like the photo that is linked. I have tried with these different methods but none of them worked:

border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
text-shadow: none !important;
box-shadow: none !important;

button 1

It also happens with this other button: button 2

I cannot use ion-buttons because the text just crashes with it.

Thanks you very much.

Upvotes: 1

Views: 4536

Answers (2)

Ulrich NGAKUI NGAHA
Ulrich NGAKUI NGAHA

Reputation: 97

You can easily use the css properties --border-color and --border-width like this: --border-color: none; --border-width: 0px !important;. I hope this will be helpful.

Upvotes: 1

jo-chris
jo-chris

Reputation: 412

Check the properties of the ion-button:

https://ionicframework.com/docs/api/button

--border-color  Border color of the button
--border-radius Border radius of the button
--border-style  Border style of the button
--border-width  Border width of the button
--box-shadow    Box shadow of the button

these can be applied to the specific class.

Or within the global.scss file, just add your styling:

ion-button {
...
}

Upvotes: 0

Related Questions