No shadow, no outline, no border on active button

Question

I am trying to remove all shadow, border or other outline elements of an active border in the Ionic Framework.

So far, I tried to modify the .sass file using the following metrics:

to remove the border

$light:                           rgba(255,255,255,0.0) !default;
$button-positive-bg:              $positive !default;
$button-positive-text:            $positive-text !default;
$button-positive-border:          $light !default;!default;
$button-positive-active-bg:       $light !default;!default;
$button-positive-active-border:   $light !default;!default;

to remove the shadow and other

.button:active{
  box-shadow: none !important;
  border-color: rgba(0,0,0,0) !important;
  outline: none !important;
}

However, I still see a small shadow when the button is pressed (grey on white background, darkened on coloured background). How can I remove all these active elements? I just want a plain button.

Thank you.

Answer 1

With the help of @ntgCleaner, who showed how to use the Chrome debugger (see comments on my post), I found out that when clicking on the button, you will see how the class changes from

class="button" 

to

class = "button activated"

So in my css/sass file, I added:

.button.activated {

 // my custom styiling

}

and that worked!