角丸ボタン→立体化 [CSS3]

html

<a href="#" class="btn_radius">単純な角丸</a>

css

.btn_radius{
    display:inline-block;
    border:solid 2px #388235;
    padding:10px;
    border-radius:10px;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• ここでは「ボタン」という体でaタグ使用するので、displayで表示形式をinline-block（適宜）に変更
• ボーダーを設定（ボーダーあり・なしはデザインに合わせて適宜設定）
• デザインや仕様に合わせて、paddingや幅・高さを設定。ここでは可変長にしたいので、幅や高さは指定しない。
• border-radiusを設定

プロパティの記述順はこの限りではないです。

ここでは全ての角を角丸にしていますが、一部だけ角丸にすることも可能です。

html

<a href="#" class="btn_radius grad">（円形）グラデーション追加</a>

ここではわかりやすいように、上記のclass[btn_radius]にclassを追加していますが、ひとつのclassにひとまとめにcssを記述しても構いません。

css

.grad{
    background: -webkit-gradient(radial, 15% 20%, 10, 15% 20%, 50, color-stop(1.00, #388235), color-stop(0.00, #a1df07));
    background: -webkit-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
    background: -moz-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
    background: -o-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
    background: -ms-radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
    background: radial-gradient(15% 20%, farthest-side, #a1df07 30%, #388235 100%);
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• 「ボタン」を立体らしくみせたいので、円形グラデーションを追加（デザインによっては線形グラデーションにするなど適宜対応）
• この場合は中心点をずらしたりしているので、ベンダープレフィックスを付与する
• webkit系ブラウザは、radial-gradientではうまく表示してくれないものもあるので-webkit-gradientも記述しておく（この場合は楕円ではなく正円グラデになるので注意・・・複数タグを入れ子にしてtransformを駆使して楕円にすることも可能）
• ここでは記述していないが、場合によってはグラデーション対応していないブラウザのために、ベタ塗背景も設定しておく

html

<a href="#" class="btn_radius grad shadow">（円形）影なども追加</a>

ここではわかりやすいように、上記のclass[btn_radius]+[grad]にclassを追加していますが、ひとつのclassにひとまとめにcssを記述しても構いません。

css

.shadow{
    box-shadow: 2px 1px 3px rgba(0,0,0,0.3);

    color:#053a02;
    font-weight:bold;
    text-decoration:none;
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

• box-shadowプロパティでさらに立体感を出す
• そのほか、必要であればテキスト周りの設定などもする

さらにhoverの設定などもするとよりそれっぽくなります