ボタンが多少クリックしがいのある手触りになりました。
今まではホバーで下線が出るのみ（テーマのCSS）だったので。
ボタンが押せると楽しいので置いておきます。
ついでに他の箇所も更新されました。
ボタンサンプル
下のボタンはリンクが設定されていないので押しまくれます。
スマホだと(ブラウザによるかもですが)一回タップでアクティブになり、もう一度押さないと凹みません。
マウス操作ではホバーで上がり、離すかクリックするとまた元に戻ります。
クリック時に凹むのは真っ当だと思いますが、そのために準備動作としてあらかじめ上げておくというやり方です。
別のサイトで作った、ページを遷移せずに表示内容を切り替えるボタンのための上下アニメーションを使いました。
グレー→蛍光色＋正面ドロップシャドウで発光している感じが出てかわいいです。
クリックすると押し込んで見えて、離すと元に戻るというところまで見せる環境のためのボタンなので、ページ遷移ボタンに使うのは微妙かもしれないですが。
これのいいところ
- 普通に見ている分には平面的なのでサイトのデザインと合う
- 押し込み動作が見えると、コントラスト変化が無くてもクリックしたことがわかる
- ホバーで動くと楽しげ
ただ、スマホからだとホバー時の動きがホバー相当の手の動きと合わず、タップした時にやっとホバーの動作をして見えるというのが微妙。
CSSサンプル
テーマで指定されていそうなものも補完すると以下のような感じで、色、ドロップシャドウの大きさと位置のバリエーションで違うボタンになっています。
html
<div class="button-blue"><a href="#">Blue Button</a></div>/* 他のボタンと共通 */
.button-blue a {
display: inline-block;/* transform translateに必要 */
border-radius: 50px;/* theme */
padding: 10px 15px;/* theme */
margin: 10px 15px;/* theme */
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;/* transformをeaseにするかで悩んだけど、all 0.3s easeか、transfromだけ0.2s easeでもよさそう */
}
/* 上下の動き */
.button-blue a:hover {
transform: translateY(-3px);
}
.button-blue a:active {
transform: translateY(0);
}
/* blue */
.button-blue a {
background-color: white;
color: #2532df;
border: 2px solid #2532df;
}
.button-blue a:hover {
background-color: white;
border-color: white;
box-shadow: 0 5px 20px rgba(28,69,255,0.25);
}こういう動きのためのtransformは、イージングでも0.3秒より遅いとモッタリしてダルい気がします。
コントラスト変化が大きい場合は速すぎるとチカチカするので、色反転は多少遅くても良いのかも
いずれ自作したいですが、多分大変だしあんまりよく分かっていないため、既存のWordPressテーマを使っています。
希望の叶う構造が作ってあるテーマを使うと、多分そこが大変な作業になるのでその点は楽だが、他人の書いたCSSとかを解読する必要があるので面倒。
テーマとの兼ね合いで実際の記述は無理やりかつメチャクチャになっている気がします。
他のアップデートなど
- 外部リンクをアイコン付きに＆投稿ページのリンクを青色に
- ブログ一覧画面で、クリックできない箇所にホバーしてもサムネイルにブラーがかかってクリックできそうな感じになるのが気持ち悪かったので変更
- ついでにサムネイルをカラーに変更
- グレスケの方がいいかなと思ってたが、せっかく作ったサムネなのでもったいない気持ちが出てきた
- 投稿画面の下部にタクソノミーリンクを追加
- 角丸ブロックは基本1emに
- サイトの細かい部分もいろいろ修正
- 隠しコンテンツに内容追加（大したものではない）
あとでやりたいこと
- タクソノミーリンクボタンもそのうちデザインを変えたい
- ヘッダー・フッターのメニューアイコンのホバー・クリックデザインを変えたい
- ヘッダー固定したい
CSSむずい