PSコントローラのボタンっぽくするCSS

○×△□ボタン表示したいな。と思ったんだけど1つ1つ画像表示するのはなんかアホらしいのでCSSでそれっぽくした。

@charset "utf-8";
.ps_button {
    border-radius: 20px;
    background: linear-gradient(#888, #333);
    font-size: 13px;
    font-weight: bold;
    padding: 5px;
}
.maru {
    color: #f00;
}

.sikaku {
    color: #f0f;
}

.sankaku {
    color: #0ff;
}

.batu {
    color: #88f;
}

spanがいいかなと思うのでspanに適当にclassをつけてつかう。

<span class="ps_button maru">○</span>