アイドルグループのWebサイトの中でも特に好きなのが日向坂46です。
シンプルでフラットなデザインがベースなので、グラデーションのボタンや柄付きの背景などの装飾が映えるなと思います。
そのグラデーションのボタンの作成方法についてまとめました。
▽ 日向坂46の公式サイト
https://www.hinatazaka46.com/1.デモページ
▽ デモページ
https://www.yuki-017.com/demo/hinatazaka-button/2.HTMLのソースコード
|
1 2 3 |
<div class="button-area"> <a class="button" href="リンク先のURL">テキスト</a> </div> |
3.CSSのソースコード
|
1 2 3 4 5 6 7 8 9 10 |
/* デフォルトの下線を無効に */ a { text-decoration: none; } /* ボタンを中央寄せにする場合 */ .button-area { text-align: center; margin: 0 auto 50px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/* ボタンの設定 */ .button { position: relative; display: inline-block; /* ボタンのサイズ */ width: 300px; line-height: 50px; /* 角丸 */ border-radius: 40px; /* 文字の色とサイズなど */ color: #fff; font-size: 14px; letter-spacing: 0.1em; /* ボタンの背景 */ background: #5bbee5; background: -webkit-gradient(linear, left top, right top, from(#5bbee5), to(#52ddae)); background: linear-gradient(to right, #5bbee5 0%, #52ddae 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bbee5', endColorstr='#52ddae',GradientType=1 ); /* IE9に対応させたい場合 */ /* アニメーション */ -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; /* 影を付けたい場合↓ */ -webkit-box-shadow: 0 5px 8px -2px rgb(0 0 0 / 25%); box-shadow: 0 5px 8px -2px rgb(0 0 0 / 25%); } /* 矢印の設定 */ .button:after { -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; content: ""; position: absolute; right: 24px; top: 20px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* マウスをボタンにかざした場合のエフェクト */ .button:hover:after { right: 18px; } |
4.ポイント ( linear-gradient )
グラデーションを表現する場合は、linear-gradient()を使用します。
日向坂の場合は以下のCSSを記述しています。
background: linear-gradient(to right, #5bbee5 0%, #52ddae 100%);
0%から始まり、右側に向かって#5bbee5から#52ddaee へと直線的に変化させています。
現在、linear-gradient()は95%のブラウザで対応しているものの、日向坂のサイトではIE9対策として以下の記述もされています。
|
1 |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bbee5', endColorstr='#52ddae',GradientType=1 ); |
5.参考サイト
▽ CSSのグラデーション（linear-gradient）の使い方を総まとめ！
【サルワカ】CSSのグラデーション（linear-gradient）の使い方を総まとめ！
