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

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

---

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

---

### 1.矢印付きリンク

---

![スクリーンショット 2020-10-30 9.17.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/0f4a119f-2f27-51e5-df6d-0bfbfddb1174.png)

---

```.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

---

![スクリーンショット 2020-10-30 9.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/1ea7676f-2cd1-ed15-2c48-e00b418b8666.png)

---

```.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で矢印の向きをかえる)

---

通常
![スクリーンショット 2020-10-30 9.53.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/43130160-752e-104b-fd9e-d3faacd71d73.png)

---

hover時
![スクリーンショット 2020-10-30 9.53.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/a9ca847c-cb21-b7ad-4b13-0be404622ec9.png)

---

```.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.フワッと背景テキストリンク

---

通常時
![スクリーンショット 2020-10-30 10.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/a2383a14-cd7d-1087-0413-f19f3ae09a06.png)

---

hover時
![スクリーンショット 2020-10-30 10.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163415/4c4f7ef1-aabc-c606-2d35-132a7cb4b67f.png)

---

```.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;
}
```

---

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