テキストリンクをおしゃれに装飾／CSSサンプル

<p class="link-btn color-1"><a href="#">テキストリンク</a></p>

.color-1 a{
--btn-color:#b3b3b3;/*ボタンの色*/
  background-color: var(--btn-color);
}

.color-1 a:hover {
  color: var(--btn-color);
  border-color:var(--btn-color);
}

<p class="link-btn color-2"><a href="#">テキストリンク</a></p>

.color-2 a{
--btn-color:#b5b089;/*ボタンの色*/
  background-color: var(--btn-color);
}

.color-2 a:hover {
  color: var(--btn-color);
  border-color:var(--btn-color);
}

<p class="link-btn color-3"><a href="#">テキストリンク</a></p>

.color-3 a{
--btn-color:#7b8fa1;/*ボタンの色*/
  background-color: var(--btn-color);
}

.color-3 a:hover {
  color: var(--btn-color);
  border-color:var(--btn-color);
}

<p class="link-btn color-4"><a href="#">テキストリンク</a></p>

.color-4 a{
--btn-color:#d9b38c;/*ボタンの色*/
  background-color: var(--btn-color);
}

.color-4 a:hover {
  color: var(--btn-color);
  border-color:var(--btn-color);
}

<p class="link-btn color-5"><a href="#">テキストリンク</a></p>

.color-5 a{
--btn-color:#8aa693;/*ボタンの色*/
  background-color: var(--btn-color);
}

.color-5 a:hover {
  color: var(--btn-color);
  border-color:var(--btn-color);
}

<p class="link-btn-border color-6"><a href="#">テキストリンク</a></p>

.color-6 a{
--btn-color:#bfbfbf;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-6 a:hover {
  background-color: var(--btn-color);
}

<p class="link-btn-border color-7"><a href="#">テキストリンク</a></p>

.color-7 a{
--btn-color:#8fa3b8;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-7 a:hover {
  background-color: var(--btn-color);
}

<p class="link-btn-border color-8"><a href="#">テキストリンク</a></p>

.color-8 a{
--btn-color:#96a68a;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-8 a:hover {
  background-color: var(--btn-color);
}

<p class="link-btn-border color-9"><a href="#">テキストリンク</a></p>

.color-9 a{
--btn-color:#9a94a4;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-9 a:hover {
  background-color: var(--btn-color);
}

<p class="link-btn-border color-10"><a href="#">テキストリンク</a></p>

.color-10 a{
--btn-color:#b09c80;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-10 a:hover {
  background-color: var(--btn-color);
}

<p class="arrowbtn-4"><a href="#">テキストリンク</a></p>

/*ボタン（矢印付き）--------------------------------- */

/*ボタンのスタイル*/
.arrowbtn-4 a {
	--arrow-color:#333;/*矢印の色*/
	display: inline-block;/*インラインブロック要素*/
	border:1px solid #b5b5ae; /*枠線（太さ、種類、色）*/
	color: var(--arrow-color);/*文字色*/
	padding: 10px 50px 10px 20px;/*内側余白（上・右・下・左）*/
	text-decoration: none;/*文字装飾なし*/
	border-radius: 99px;/*ボタンの角*/
	transition: .3s all;/*変化をゆっくり*/
	position:relative;/*起点*/
}

/*矢印のスタイル*/
.arrowbtn-4 a:after {
	content: '';/*矢印の描写*/
	border-bottom: 1px solid var(--arrow-color);/*下矢印の太さ、種類、色*/
	border-right: 1px solid var(--arrow-color);/*右矢印の太さ、種類、色*/
	width: 15px;/*矢印の幅*/
	height: 3px;/*矢印の高さ*/
	transform: skewX(45deg);/*矢印の角度*/
	position: absolute;/*矢印の位置*/
	right: 20px;/*右からの位置*/
	bottom:50%;/*下からの位置*/
}


/*マウスオーバー時の変化*/
.arrowbtn-4 a:hover{
	--link-btn-color:#b5b5ae;/*ボタン色*/
	background-color: var(--link-btn-color);
	border-color:var(--link-btn-color);
	color:#fff;
}

.arrowbtn-4 a:hover:after {
	border-color:#fff;
}

<p class="move-line-left"><a href="#">左から右に下線</a></p>

/*左から右に下線*/
.move-line-left a {
	text-decoration: none; /* リンクの下線を消す */
	position: relative; /* 擬似要素の基準位置 */
	color:#333;
	padding-bottom:10px;
}

.move-line-left a::before {
	content: "";
	position: absolute;
	left: 0; /* 左から開始 */
	bottom: 0; /* リンクテキストの下に表示 */
	width: 0;
	height: 2px; /* 下線の太さ */
	background-color: #333; /* 下線の色 */
	transition: all 0.4s ease; /* アニメーション効果 */
}

.move-line-left a:hover::before {
	width: 100%; /* 下線を全体に広げる */
}