Remove blue outline from button with ValoTheme.BUTTON_LINK style

Hi,
I am using Valo theme and having few buttons set to ValoTheme.BUTTON_LINK style. When these button get focus they show a blue border / highlight / outline!!! which I don't want. I tried following in my CSS but did not work:

.v-button-link:focus {
      padding: 0px;
      border: none;
      outline: none;
    }

I tested this on Chrome and IE11.

Any help on how this can be achieved?

Best regards,
Bhartesh

Thanks Marko.
I opened the demo page from the link you provided and thats exactly how I want it to be, but unfortunately thats not how it is being displayed in my application. The following demo for Valo theme also shows the blue outline just like what I see in my application:
https://demo.vaadin.com/valo-theme/#!buttons-and-links
Now that is indeed very strange !!!

Best regards,
Bhartesh

Ok, yes I can see it in that demo. Looking at it with FireBug shows that focusing the button brings up a ".v-button:focus::after" rule that sets the box-shadow property. Well, it does also set border color, where the border is defined in a rule matching ".v-button::after", but that doesn't seem to cause the bothering focus outline.

I don't see any settings in the Valo demo sources that could affect that. The _button.scss defines the button focus styles, but I can't see how that's different in the two demos, as I think both use defaults for the button styling.

In any case, setting something like ".v-button:focus::after {box-shadow: none}" probably disables the focus indicator.

HI guys,

The blue outline is there by design, to indicate to the user where the keyboard focus is, and is really needed by people who only use the keyboard to navigate an app. So if you decide to hide the focus outline, just notice it will make it harder for people to use it with the keyboard.

You should be able to disable the outline with the following CSS:

.v-button-link:after {
  content: none;
}