本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。
この記事は最終更新から2年以上経過しています。
ボタンパーツの枠線にグラデーションをかけた時の覚書。
線にグラデーションをかけて、背景を任意の色に設定してあげればとりあえずはデザイン通りのボタンを実装できましたとさ。
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要素で作るボタンなどにも流用できるので覚えておくと良さそう。