よく使うuiパーツ(テキストリンク編)

開発においてよく使うuiパーツを残しておこうと思います。
自分はこんな感じで表現していますという程度なので、もしもっと簡単にできるよとか
こんなデザインあるよとかあれば教えてください。

---

リンクテキスト

よくあるリンクテキストの例を紹介します。

---

1.矢印付きリンク

---

---

.html

<a class="c-link" href="#">テキストリンクです。</a>

---

.css

.c-link {
  display: flex;
  align-items: center;
}

.c-link:before {
  display: inline-block;
  content: "";
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #ff0000;
}
.c-link:link,
.c-link:visited {
  color: #ff0000;
  text-decoration: none;
}
.c-link:hover {
  text-decoration: underline;
}

---

2.矢印付きリンク その2

---

---

.html

<a class="c-link" href="#">テキストリンクです。</a>

---

.css

.c-link {
  position: relative;
  padding-right: 10px;
}

.c-link:before,
.c-link:after {
  position: absolute;
  right: 0;
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #ff0000;
}
.c-link:before {
  top: calc(50% - 10px);
  transform: rotate(45deg);
}
.c-link:after {
  top: calc(50% - -1px);
  transform: rotate(135deg);
}
.c-link:link,
.c-link:visited {
  color: #ff0000;
  text-decoration: none;
}
.c-link:hover {
  text-decoration: underline;
}

---

3.矢印付きリンク その3(hoverで矢印の向きをかえる)

---

通常

---

hover時

---

.html

<a class="c-link" href="#">テキストリンクです。</a>

---

.css

.c-link {
  position: relative;
  padding-right: 10px;
}

.c-link:before,
.c-link:after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #ff0000;
  transition: all 0.3s ease-out;
}
.c-link:before {
  top: calc(50% - 4px);
  right: 0;
  transform: rotate(-135deg);
}
.c-link:after {
  top: calc(50% - 4px);
  right: 0;
  transform: rotate(-45deg);
}
.c-link:link,
.c-link:visited {
  color: #ff0000;
  text-decoration: none;
}
.c-link:hover {
  text-decoration: underline;
}
.c-link:hover:before {
  top: calc(50% - 7px);
  transform: rotate(-45deg);
}
.c-link:hover:after {
  top: calc(50% - 7px);
  transform: rotate(45deg);
}

---

4.フワッと背景テキストリンク

---

通常時

---

hover時

---

.html

<a class="c-link" href="#">テキストリンクです。</a>

---

.css

.c-link {
  color: #ff0000;
  transition: all 0.3s ease-out;
}
.c-link:link,
.c-link:visited {
  color: #ff0000;
  text-decoration: none;
}
.c-link:hover {
  color: #fff;
  background: #ff0000;
}

---

まとめ

テキストリンクは色々デザインがあるので他にもいい実装方法とかデザインがあれば教えてください。