にじいろボタン
2022年12月25日

みなさんメリークリスマスです。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、虹色のボタンを作ってみようと思います。クリスマス関係ねえー
参考:マンガでわかるホームページ作成|【html / css】虹色の作り方【背景・文字・アニメーション】
いつものボタン
なんかオシャレだなと思って外枠あり+背景は透明、というボタンをよく使っています。
こういうのを「ゴーストボタン」というそうです。アーイ!バッチリミナー!
ミニマルデザインにマッチしそうですが、CTA(Call To Action:行動喚起)の面からはやや不利なようです。
つまりクリック率が低いらしいです。/(^o^)\ナンテコッタイ
.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年もよろしくお願いします。