にじいろボタン

.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;
}

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