560days 電脳備忘録

ボタンパーツの枠線にグラデーションをかける

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

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


 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要素で作るボタンなどにも流用できるので覚えておくと良さそう。

投稿日
カテゴリ