ボーダーにグラデーションを設定する

ボタンのボーダーにグラデーションを指定する機会があったので、対応方法をメモ。

サンプルコード

まずは疑似要素でボーダー部分を設定する方法です。

HTML

<a href="" class="btn">BUTTON</a>

CSS

.btn {
	display: block;
	width: 200px;
	box-sizing: border-box;
	padding: 10px 0;
	color: #000000;
	text-decoration: none;
	text-align: center;

	/* ボーダーに必要な部分 */
	position: relative;
	border-left: #E74C3C 1px solid;
	border-right: #3498DB 1px solid;
}
.btn:before,
.btn:after {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
    background: linear-gradient(90deg, #E74C3C, #3498DB);
}
.btn:before {
	top: -1px;
}
.btn:after {
	bottom: -1px;
}

左右のボーダーはborderで設定して、上下のグラデーションがかかったボーダーは疑似要素で対応しています。
疑似要素で対応するデモページ

HTML

次に入れ子の要素を追加して、背景でグラデーションを指定する方法です。

<a href="" class="btn2">
	<span class="btn2_inner">BUTTON</span>
</a>

CSS

.btn2 {
	display: block;
	width: 200px;
	box-sizing: border-box;
	color: #000000;
	text-decoration: none;
	text-align: center;

	/* ボーダーに必要な部分 */
    background: linear-gradient(90deg, #E74C3C, #3498DB);
	padding: 1px;
}
.btn2_inner {
	display: block;
	padding: 10px 0;
	background: #ffffff;
}

背景でグラデーションを指定して、入れ子の要素でその上から白色背景をかぶせています。
背景指定で対応するデモページ