p.btn0 { margin: 10px; } /*1.borderとbackgroundのみ変更したもの*/ a.btn01 { text-decoration: none; padding: 5px 10px 5px 10px; border: 1px solid #777777; font-size: 120%; font-weight: 800; color: #444444; background: #aaaaaa; } a.btn01:hover { background: #888888; } /*2.border-radiusを追加したもの*/ a.btn02 { text-decoration: none; padding: 5px 10px 5px 10px; border: 1px solid #777777; border-radius: 5px; font-size: 120%; font-weight: 800; color: #444444; background: #aaaaaa; } a.btn02:hover { background: #888888; } /*3.さらにボタンに陰を追加したもの*/ a.btn03 { text-decoration: none; padding: 5px 10px 5px 10px; border: 1px solid #777777; border-radius: 5px; -webkit-box-shadow: 3px 3px 5px #222222; box-shadow: 3px 3px 5px #222222; font-size: 120%; font-weight: 800; color: #444444; background: #aaaaaa; } a.btn03:hover { background: #888888; } /*4.背景にグラデーションをかけてみました*/ a.btn04 { text-decoration: none; padding: 5px 10px 5px 10px; border: 1px solid #777777; border-radius: 5px; -webkit-box-shadow: 3px 3px 5px #222222; box-shadow: 3px 3px 5px #222222; font-size: 120%; font-weight: 800; color: #444444; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.68, #ffd1d1), color-stop(0.00, #ff1a00)); background: -webkit-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -moz-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -o-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -ms-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); } a.btn04:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.55, #dbffbd), color-stop(0.04, #285c2f)); background: -webkit-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -moz-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -o-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -ms-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: linear-gradient(top, #285c2f 4%, #dbffbd 55%); } /*5.テキストに陰をつけてみました*/ a.btn05 { text-decoration: none; padding: 5px 10px 5px 10px; border: 1px solid #777777; border-radius: 5px; -webkit-box-shadow: 3px 3px 5px #222222; box-shadow: 3px 3px 5px #222222; font-size: 120%; font-weight: 800; color: #999999; text-shadow: 2px 2px 2px #444444; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.68, #ffd1d1), color-stop(0.00, #ff1a00)); background: -webkit-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -moz-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -o-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: -ms-linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); background: linear-gradient(top, #ff1a00 0%, #ffd1d1 68%); } a.btn05:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.55, #dbffbd), color-stop(0.04, #285c2f)); background: -webkit-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -moz-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -o-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: -ms-linear-gradient(top, #285c2f 4%, #dbffbd 55%); background: linear-gradient(top, #285c2f 4%, #dbffbd 55%); color: #222222; text-shadow: 2px 2px 2px #444444; }
上のボタンにマウスを持っていくと、背景の色が変化します。
5pxの丸みを付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。IEは9から対応するようです。
陰を付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。IEは9から対応するようです。
陰を付けてみました。上のボタンにマウスを持っていくと、背景の色が変化します。なお、CSS3のグラデーションのコードを簡単に作成してくれるサイトがあります。Easy Gradation Editor "Grad2" という所です。なお、グラデーションはIEはまだ対応していないようです。IE10から対応するようです。
陰を付けてみました。上のボタンにマウスを持っていくと、背景とテキストの色が変化します。これもIEはまだ対応していないようです。