CSS ボタンのフォーカス時に色を濃くしたい

基本

同じ場所を透明度指定した枠を載せる。

css

button {
  position: relative;
}

button:focus::before {
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

Sass

@mixin OverViewWithFocus {
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

button { 
  position: relative;
  
  &:focus {
    &:before {
      @include OverViewWithFocus;
    }
  }
}