サンプル
See the Pen Codepen by Tora (@webtoranomaki) on CodePen.
コード
<a class="btn btn01" href="#">Button</a>
.btn {
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
.btn01 {
color: #fff;
border: 1px solid #333;
background-image: linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(0, 0, 0, 1));
}
.btn01:hover {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(51, 51, 51, .8));
}
記事の補足・今後追加したい内容
- ボタンの透過サンプルをわかりやすくするために背景色にCSSでストライプ柄を描画。方法についてはこちらで紹介してます。
- 同じくhoverで透過させる場合のボタンサンプル。こちらはグラデーションではなく単色の透過方法。