CSSデザインCSSのグラデーションを使った背景パターンに半透明のマスクをかけてデザインした、オシャレなボタンのサンプルを紹介しています。このページのサンプルはボタンに対して設定していますが、ページの背景や部分的な背景に使う事もできます。spanタグを使えば、ボタンのさらに上からCSS3のパターンを追加する事もできます。それと基本的には全てコピペするだけで、ホームページやブログに実装できるのでよければ使って見て下さい。ボタンのデザインサンプル下記は全てのボタンの基本設定です。下のHTMLとCSSをコピペして下さい。(#の部分にはボタンを押した時のリンク先urlを記述します)その後、各ボタンのCSSをコピペして下さい。ボタンをすべて同じデザインにしたい場合は、class="sample"の「sample」の部分を全部統一します。12px;}設定方法など上記で紹介したボタンのデザインのような半透明のマスクをかける場合は、普通フォトショップでグラデーションオーバーレイなどを使用して画像として作ります。CSS3でも背景のパターン(模様)を設定し、rgbaで上半分の透過度を下げやれば同じような効果を表現することができます。a{}内のグラデーションの色指定を16進数ではなく、rgbaに変更するとまた違ったアクセントのあるデザインにできます。#fcfcfa)の色指定の部分を変えるとボタンの上半分の色が変わります。0.50というのはグラデーションの位置なので、そこを変更するとまた違ったデザインにできます。#f4f3f2というように16進数ではなくrgba(0,0,0,0.1)というようにalpha(0.1の部分)を追加する事で、うっすら半透明な色にする事も可能です。まとめこんな感じでボタンのデザインは簡単に変える事ができるので是非やってみて下さい。ちなみにボタンではなく、hタグなどの見出しの背景などに設定する事もできます。