何が悲しくて昔ながらのキーボード風ボタンデザイン作ってるんだろう

初投稿なのにテンション低くてごめんなさいm(_ _)m

2019/09/11追記

こんなCSS使わなくても、border-style: outsetでよくね？って気付いた。
でも押した時のShadowエフェクトも良かったのでこのままに。

Windows1998ぐらいのボタンデザインを描く

基本的なコードは他所様のコピペです。（検索したフリー素材）
なんで絶滅するIE11対応をやらされてるのだろう。
Google chrome標準インストールまだかな。
AndroidでGoogleアカウントほぼ必須なんだからWindowsとGoogle協力しない？

.btn-square-so-pop {
        position: relative;
        display: inline-block;
        padding: 5px 5px;
        text-decoration: none;
        color: #000000;
        background: #e9e3e0;
        box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        font-weight: bold;
        border: solid 5px #c4c0ba #808080 #757575 #c9c9c9;
    }

    .btn-square-so-pop:active {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.30);
    }

もっとポップなデザインとかにしたいけれども、IE11の環境を自宅PCに入れたくないし、すでに新しいPCが隣で眠ってるのでガッツリは書かない。

けれども、動作環境を火狐でしかしてないから本番ぶっつけでやるという無駄作業をしつつこの記事を締めます。