サンプル
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;
background-image: linear-gradient( #333, #000 );
}
.btn01:hover {
background-image: linear-gradient( #000, #333 );
}
記事の補足・今後追加したい内容
- hover時にグラデーション背景が透過する場合のボタンサンプル。