硝子釦

昨日のエレベーターのボタンを眺めているうちに、ガラスっぽいボタンを作りたくなった。

遠い昔を振り返れば、 macOS のボタンがガラス風だったんだよな。グラファイトとの組み合わせが美しくて好きだった。フラットデザインの余波なのか、今のボタンは美しくなくなってしまったけれど。

で、「ガラス風」だが、これは屈折と反射で醸し出されるものだ。外光を反射して光るとか、逆に影ができるとか、周囲の物が映り込むとか、中のものが少し歪んで見えるとか。これらをきちんと再現しようとするとかなり面倒だが、ネットに大量に転がっている先人の成果物を見ると、ハイライトだけでもなんとかなりそう。

ということで、作ってみたのがこれ。

まあまあガラスっぽい。

ハイライトと地とのコントラストが周囲の色に引っ張られそうなので、薄いのと濃いので二つ作ってみたのだが、作って正解だった。思った以上に影響される。なんかもう違う色に見えるからね。

以下、ソース。

html


<button class="glass-button light">釦</button>
<button class="glass-button dark">釦</button>

css


.glass-button {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;

  position: relative;
  display: inline-block;
  width: 6em;
  height: 2em;
  border-radius: 8px;

  color: #000000;
  text-shadow: 1px 1px 0px #a0a0a0;

  &.light {
    background-color: #e0e0e0;
    box-shadow: 1px 1px 1px #a0a0a0;
  }
  &.dark {
    background-color: #c0c0c0;
    box-shadow: 1px 1px 1px #808080;
  }

  &::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 1px;
    height: 50%;
    border-radius: 6px;
    background-image: linear-gradient(
      0deg,
      rgba( 255, 255, 255, 0.4 ),
      rgba( 255, 255, 255, 1.0 )
    );
  }
}

ポイントは疑似要素 after で、これを半透明にして重ねてハイライトとしている。

疑似要素だけで手軽な割にガラスっぽさもそこそこあって、俺の中の満足度は高い。ボタンなので、 focus や hover で何か反応があった方が良いのだろうが、それらはまた別の機会に。