背景パターンに半透明マスクをかけたボタンデザイン

CSSのグラデーションを使った背景パターンに半透明のマスクをかけてデザインした、オシャレなボタンのサンプルを紹介しています。
このページのサンプルはボタンに対して設定していますが、ページの背景や部分的な背景に使う事もできます。またspanタグを使えば、ボタンのさらに上からCSS3のパターンを追加する事もできます。
それと基本的には全てコピペするだけで、ホームページやブログに実装できるのでよければ使って見て下さい。

ボタンのデザインサンプル

下記は全てのボタンの基本設定です。まずは下のHTMLとCSSをコピペして下さい。 (#の部分にはボタンを押した時のリンク先urlを記述します)
その後、各ボタンのCSSをコピペして下さい。ボタンをすべて同じデザインにしたい場合は、class=”sample”の「sample」の部分を全部統一します。

●css
ul.botan{
list-style:none;
font-family:’Mv Boli’, cursive;
font-size:18px;
margin:0;
padding:0;
width:300px;
}
.botan a span{
display:block;
padding:10px;
}
.botan a{
display:block;
background-color:#fff;
background:-webkit-gradient(linear, left bottom, left top, color-stop(0.50, #f4f3f2),color-stop(0.50, #fcfcfa));
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius:5px;
margin-bottom:15px;
color: #cbbe9c;
text-align:center;
text-decoration:none;
}

①チェック背景のボタン

●css
.sample1{
background-image: -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%),
-webkit-linear-gradient(0deg, transparent 50%,rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%);
-webkit-background-size: 6px 6px;
}

②ストライプ背景のボタン

●css
.sample2{
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #fff), color-stop(.5, transparent), to(transparent));
-webkit-background-size: 6px 6px;
}

③斜めストライプ背景のボタン

●css
.sample3{
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, #fff), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, #fff),
color-stop(.75, #fff), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%,
transparent 50%, #fff 50%, #fff 75%,
transparent 75%, transparent);
-webkit-background-size: 6px 6px;
}

④縦ストライプ背景のボタン

●css
.sample4{
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #fff), color-stop(.5, transparent), to(transparent));
-webkit-background-size: 6px 6px;
}

⑤ひし型背景のボタン

●css
.sample5{
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #fff), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #fff), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #fff)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #fff));
-webkit-background-size:8px 8px;
}

⑥チェック柄背景のボタン

●css
.sample6{
background-image: -webkit-linear-gradient(45deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
-webkit-linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
-webkit-background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}

⑦チェック背景のボタン(2)

●css
.sample7 {
background-image: -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%),
-webkit-linear-gradient(0deg, transparent 50%,rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 100%);
-webkit-background-size: 12px 12px;
}

設定方法など

上記で紹介したボタンのデザインのような半透明のマスクをかける場合は、普通フォトショップでグラデーションオーバーレイなどを使用して画像として作ります。ですがCSS3でも背景のパターン(模様)を設定し、rgbaで上半分の透過度を下げやれば同じような効果を表現することができます。
また.botan a{}内のグラデーションの色指定を16進数ではなく、rgbaに変更するとまた違ったアクセントのあるデザインにできます。

●css .botan a{ background:-webkit-gradient(linear, left bottom, left top, color-stop(0.50, #f4f3f2),color-stop(0.50, #fcfcfa)); }

上記は基本設定の一部を抜粋したものですが、例えばcolor-stop(0.50, #f4f3f2)の色を変更するとボタンの下半分の色が変わり、color-stop(0.50, #fcfcfa)の色指定の部分を変えるとボタンの上半分の色が変わります。
0.50というのはグラデーションの位置なので、そこを変更するとまた違ったデザインにできます。また#f4f3f2というように16進数ではなくrgba(0,0,0,0.1)というようにalpha(0.1の部分)を追加する事で、うっすら半透明な色にする事も可能です。

まとめ

こんな感じでボタンのデザインは簡単に変える事ができるので是非やってみて下さい。ちなみにボタンではなく、hタグなどの見出しの背景などに設定する事もできます。
あと背景のグラデーションパターンを変える事で、もっと色々な種類のデザインになるのでよければお試しください(^^♪