まねてみました。
SCSS
body { background: #1e1e1e; } .btn { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding-top: 8px; border: solid 1px rgba(255, 255, 255, .5); border-radius: 50%; width: 73px; height: 73px; color: #fff; font: 34px HelveticaNeue-UltraLight, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", sans-serif; text-align: center; background: rgba(255, 255, 255, 0); transition: background .4s ease-in-out; &:after { display: block; position: relative; top: -3px; left: 2px; font-size: 10px; content: "JKL"; letter-spacing: .3em; } &.on { background: rgba(255, 255, 255, .5); transition: background .1s ease-in-out; } }