いろいろな文章中のリンクのデザイン
投稿日: 2022/09/20
更新日: 2022/09/20
更新日: 2022/09/20
概要
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;
}
おわりに
適材適所でしつこくならないように使いたいものですね。