【linear-gradient】背景色をはっきり二分割する方法

こんにちは。今日はボタンを例に「背景色をはっきり二分割する方法」について書きます！

イメージはこんな感じ↓

あまり見ないデザインですが、ボタンを強調したい時などに使われるのかなと思います。

ちなみに使うプロパティを先に言うと、グラデーション を実装したい時に使われるbackground: linear-gradient();です！

通常グラデーションはゆっくり変化していくデザインが主だと思います。その場合はこんな感じで記述しますよね。

background: linear-gradient(to top, #051a82, #092bd6);

ちなみに、変化地点を決める場合は数値を指定したりもできますね。

  background: linear-gradient(to top, #9da3f2 25%, #092bd6);

では、今回のようにはっきりと二分割させたい時はどう記述したらいいと思いますか？＾＾

ということで、さっそくコードを見ていきましょう〜！

コード

HTML編

<div class="btn"><a href="#">詳しくみる</a></div>

CSS編

.btn {
  text-align: center;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  font-size: 2.2rem;
}

.btn a {
  display: inline-block;
  box-sizing: border-box;
  min-width: 300px;
  padding: 15px 25px;
  border: 2px solid #000;
  text-decoration: none;
  border-radius: 5em;

  background: linear-gradient(to top, #051a82 0%, #051a82 50%, #092bd6 50%, #092bd6 100%);
}

linear-gradient();の数値を見ると、0%〜50%、50%〜100%で区切って色を指定していることがわかります。

このように、グラデではっきりと色を分けることもできるんだな〜と学びました＾＾

では今日はここまで〜