キーボードっぽいボタン記法のUserCSS

ctrl

code:style.css

.deco-\< {

display: inline-block;

/* 表示位置が低いので上側に補正 */

position: relative;

bottom: 1px;

/* ボックス */

margin: 0px 2px;

padding: 3px 6px 6px 6px;

border-radius: 4px;

box-shadow: rgb(32, 34, 37) 0px -4px 0px 0px inset;

background-color: rgb(79, 84, 92);

border: 1px solid hsl(220,7.7%,22.9%);

/* フォント */

color: hsl(240,5.9%,96.7%);

line-height: 100%;

font-weight: 600;

font-size: 0.8em;

text-align: center;

text-transform: uppercase;

}

.deco-\<:hover {

transform: translateY(2px);

box-shadow: inset 0 -2px 0 hsl(220,7.7%,22.9%);

border: 1px solid hsl(216,7.2%,13.5%);

height: 21px;

padding-bottom: 2px;

}