読者です 読者をやめる 読者になる 読者になる

16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【CSS】pager周りのCSSをいじりました ~文字列リンクをボタンっぽくする方法

ページャー*1周りのCSSを少しいじりました。CSS初心者です。
具体的には、

  1. 文字列リンクをボタンっぽくした
  2. 方向記号を付けた

の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:「次の記事」、「前の記事」、「次のページ」などのリンク