にじいろボタン

.btn-outline-chemist {
  color: #32bdeb;
  background-color: transparent;
  background-image: none;
  border-color: #32bdeb;
}

.btn-outline-chemist:hover {
  color: #fff;
  background-color: #32bdeb;
  border-color: #32bdeb;
}

枠線を虹色にしてみよう

以前やったグラデーションを使ってみます。

border-imageとborder-image-sliceを使います。

.btn-outline-rainbow1 {
  border-image: linear-gradient(to right, #ff5a5a, #ffbc41, #f5f551, #5eff5e, #84a1ff, #ff45ff);
  border-image-slice: 1;
  color: #32bdeb;
  background-color: transparent;
}

おお、美しい（虹色といいつつ6色しか使ってませんが）

どこで使うねん？と疑問だった conic-gradientを使うと、ぐるっと1周する感じでグラデーションをかけられます。

.btn-outline-rainbow2 {
  border-image: conic-gradient(#f5f551, #5eff5e, #84a1ff, #ff45ff, #ff5a5a, #ffbc41, #f5f551) 1;
  border-image-slice: 1;
  color: #32bdeb;
  background-color: transparent;
}

文字を虹色にしてみよう

これもグラデーションの記事でやりましたね。

background-clipとtext-fill-colorを使います。

.btn-outline-rainbow3 {
  background: -webkit-linear-gradient(0deg, #ff5a5a, #ffbc41, #f5f551, #5eff5e, #84a1ff, #ff45ff);			
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字数に対してボタンの横幅が長いと、途中の色だけになってしまいますね。

文字色が徐々に変化

@keyframeを使います。

.btn-outline-rainbow4 {
  animation: 5s text-rainbow linear infinite;	
}	
	
@keyframes text-rainbow {
  0% {
    color: #e60000;
  }
  14% {
    color: #f39800;
  }
  28% {
    color: #fff100;
  }
  42% {
    color: #009944;
  }
  56% {
    color: #0068b7;
  }
  70% {
    color: #1d2088;
  }
  85% {
    color: #920783;
  }
  100% {
    color: #e60000;
  }
}

右から左に徐々に変化させることもできます。

.btn-outline-rainbow5 {
  background: linear-gradient(to right, #e60000, #f39800, #fff100, #009944, #0068b7, #1d2088, #920783, #e60000) 0 / 200%;
  background-clip: text;
  text-fill-color:transparent;
  animation: 5s text-rainbow2 linear infinite;
}

@keyframes text-rainbow2 {
  to {
    background-position:200%;
  }
}

背景色を虹色に

マウスカーソルを乗せたら虹色の背景＋白文字になるようにしてみます。

.btn-outline-rainbow6 {
   background-color: transparent;
   transition: all 0.5s ease;
}

.btn-outline-rainbow6:hover {
   color: #fff!important;
   background:linear-gradient(to right, #ff5a5a, #ffbc41, #f5f551, #5eff5e, #84a1ff, #ff45ff)!important;
   transition: all 0.5s ease;
}

うーん...なぜかtransition（ふわっと変化させる）が効いてないですね。

どうやらグラデーションにはtransitionが効かないようです。

ふわっとさせるには、opacityと疑似要素beforeを使います。

.btn-outline-rainbow7 {
  position: relative;
}

.btn-outline-rainbow7::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  transition: all 0.7s ease;
  opacity: 0;
  background:linear-gradient(to right, #ff5a5a, #ffbc41, #f5f551, #5eff5e, #84a1ff, #ff45ff)!important;
}

.btn-outline-rainbow7:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  z-index: 99999;
}
			  
.btn-outline-rainbow7:hover::before {
  opacity: 1;
  z-index:-100;
}

beforeで虹色背景を作って、opacity:0で見えなくしておいて、マウスホバーでopacity:1にして見えるようにしました。

そのままだと文字が隠れてしまうので、z-indexをマイナスにしています。

背景色がアニメーション

背景の虹色を動くようにしてみます。

これも@keyframeを使います。

.btn-outline-rainbow8 {
  position: relative;
}
			  
.btn-outline-rainbow8::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  transition: all 0.7s ease;
  opacity: 0;
  background: linear-gradient(to right,#e60000,#f39800,#fff100,#009944,#0068b7,#1d2088,#920783,#e60000) 0 / 200%;
  animation: 5s bg-rainbow linear infinite;	
}

@keyframes bg-rainbow {
  100% {
    background-position: 200%;
  }
}
	
.btn-outline-rainbow8:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  z-index: 99999;
}
	
.btn-outline-rainbow8:hover::before {
  opacity: 1;
  z-index:-100;
}

本当は枠線もアニメーションさせたかったのですが、透明背景との併用が難しそうです。また今度挑戦してみます。

まとめ

虹色はプレミア感がありますね。

ゲームのガチャ石とか最高レアでは虹色がよく使われている気がしますが、ウェブサイトではあまり使われないようです。見づらいからだよ！

2022年もお世話になりました。
2023年もよろしくお願いします。

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog