サンプル

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));
}

記事の補足・今後追加したい内容