【CSS】pager周りのCSSをいじりました ~文字列リンクをボタンっぽくする方法
ページャー*1周りのCSSを少しいじりました。CSS初心者です。
具体的には、
- 文字列リンクをボタンっぽくした
- 方向記号を付けた
の2点です。
「2.方向記号を付けた」についてはちょっと書きたいことがあるんですが、
今日は喉が痛いのでやめときます。
文字列リンクをボタンっぽくする方法
以下のようなCSSを書きました。
.pager a { display: block; margin-bottom: 5px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #ffffff; width: 150px; color: #454545; text-decoration: none; text-align: center; transition: 0.2s; } .pager a:hover { text-decoration: none; background-color: #f5f5f5; color: #005555; }
displayをblockにしてあげて、widthを固定にしただけです。
ボタンにフォーカスされたことが分かりやすいようにhoverで色とかは変えていますが、
それ以外に特に大したことはしていません。
本当はbackground-colorを白以外にするともっとボタンっぽくなるのですが、
良い色が決まらなかったのでとりあえず白にしてあります。
配色センスが欲しい。
終わり。
*1:「次の記事」、「前の記事」、「次のページ」などのリンク