概要

HP のデザインを行なっていて複数のサイトをみて色んなリンクのデザイン方法があるなーと思ったので簡単なサンプルを備忘録として列挙します。
ここでは 文章中 で使うリンクを取り上げます。
ボタン形状はまた別途書きます。

デザイン集

この話題ならfull dictへ

この話題ならfull dictへ

通常よりカラーが薄く、ホバー時に企業カラー（今回は例として緑）になったりしていた

.link1 {
  color: grey;
  text-decoration: underline;
}
.link1:hover {
  color: green;
}

この話題ならfull dictへ

.link2 {
  color: black;
  font-weight: bold;
  text-decoration: underline;
}
.link2:hover {
  color: gray;
}

この話題ならfull dictへ

モノトーンなシンプルイズベストなサイトで採用されていた

.link3 {
  color: black;
  text-decoration: underline;
}
.link3:hover {
  color: black;
  text-decoration: none;
}

この話題ならfull dictへ

.link4 {
  color: black;
  text-decoration: underline;
}
.link4:hover {
  color: black;
  background-color: skyblue;
  text-decoration: none;
}

適材適所でしつこくならないように使いたいものですね。