無理矢理、CSSでボタンを作ったのですが、かなり無理矢理感はんぱないです。

これでも試行錯誤して作ったのですが、もっと適切なcssの設定方法があると思っています。

どなたかリファクタリングをして頂けませんでしょうか？m(_ _)m
↓
ttp://codepen.io/anon/pen/vBFdt
↑
ただ、1点条件がありまして、クラスは1つだけで対応したいと考えています。（.btnクラスと.btnクラスの疑似要素）

つまり、.btnクラスをつけた要素を、別クラスが当てられた要素でラップしてボタンを作るというのは考えておりません。

-----
HTML
-----
<a class="btn" href="">ボタン</a>

-----
CSS
-----
.btn {

display: inline-block;
cursor: pointer;

border-radius: 4px;
padding:0.5em 1em;

background: #cccccc;

color: inherit;
text-decoration: none;

position: relative;

line-height:1.5;

padding-left:40px;
overflow:hidden;
}

.btn:before {

content: "F";
color: #ffffff;
background-color: #000000;
position: absolute;
line-height:1.5;
padding:8px 10px;
left:0;
top:0;
}

.btn:hover {
opacity:0.8
}

.btn:hover:before {
opacity:0.8;
}