ボタンパーツの枠線にグラデーションをかけた時の覚書。

線にグラデーションをかけて、背景を任意の色に設定してあげればとりあえずはデザイン通りのボタンを実装できましたとさ。

input[type="submit"] {
width: 100%;
max-width: 350px;
height: 54px;
padding: 0;
color: #162859;
border-radius: 4px;
background: #fff;
background-repeat: repeat-x;
border-image: linear-gradient(to right, #00f, #f00);
border-image-slice: 1;
cursor: pointer;
}

div要素で作るボタンなどにも流用できるので覚えておくと良さそう。