Button background-color problem

Hello! I need to help with the problem of css. I create mytheme.scss, import valo theme, and add custom rules:

    .eq-btn-not {
      width: 32px;
      height: 32px;
      border-radius: 3px;
      background-color: #148eb5;
    }

and then I set this style this way: equalityButton.setStyleName(“eq-btn-not”);

When I test this button in browser background-color show as default #fafafa, but in properties of button color was right #148eb5. I see that button has :after (from default .v-button style) pseudo effect, which lay over the button. And when I edit css like this:

    .eq-btn-not {
      width: 32px;
      height: 32px;
      border-radius: 3px;
    }

    .eq-btn-not:after {
      background-color: #148eb5;
    }

background-color show correct. What is it? :after effect overlay button? Or I doing something wrong?

Fixed. Set property background: transparent.

Hello,

Valo uses .v-button::after for focus styles.

Source:

https://github.com/vaadin/framework/blob/master/themes/src/main/themes/VAADIN/themes/valo/components/_button.scss

Demo:

https://demo.vaadin.com/valo-theme/#!buttons-and-links

Focus and inspect a button’s ::after element to see the effects.