CSSでリンクをボタンにデザイン

CSSでのボタンデザインには色々な方法がありますが、aタグにclass指定のみで実装しました。
今回導入したスタイルは「マウスオーバーで回転する丸いボタン」です。

シンプルですがPCでは回転するアニメーションで動きがありますし、モバイルではマウスオーバーの概念がないので回転しませんが、ボタンとしてのエリアが確保されますのでユーザー視点からも押しやすいボタンになります。

HTML

<a class="btn" href="#">ボタン<br />リンク</a>

CSS

a.btn {
    background-image: url("背景画像.jpg");
    margin: 0 auto;
    background-color: #ffffff;
　　　　　　　　background-image: url("背景画像.jpg");
    background-size: 120%;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #ec6d51;
    width: 120px;
    height: 120px;
    padding: 40px 0;
    line-height: 20px;
    border: double 4px;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;
    transition: .6s;
}

a.btn:hover {
    transform: rotateY(360deg);
}

欠点としては円に入る文字数が限られるので導入する場合注意が必要ですね。
上記ソースをベースにボタンの色など変えて使ってみてください！

ボタン
リンク

背景色を入れるとまた雰囲気が変わりますね。

ボタン
リンク

今回は和風のサイトの制作に伴い、背景画像に和紙の画像を入れて見ました。
少しのアイデアで雰囲気を変える事が出来ますね。

ボタン
リンク