コピペでできる！CSSとhtmlだけのテキストリンクデザイン12選

テキストリンクデザイン [12種]

HOVERで背景の色が変わる

ニャン易度

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	display: inline-block;
	padding: 0.1em 0.3em;
	transition: all .3s;
}
.cp_link:hover {
	color: #fff;
	background-color: #00BCD4;
}

HOVERで文字が拡大

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	display: inline-block;
	padding: 0.3em;
	transition: .3s;
	transform: scale(1);
	color: #F4511E;
}
.cp_link:hover {
	transform: scale(1.05);
}

HOVERで文字が少し拡大して戻る

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	display: inline-block;
	padding: 0.3em;
	color: #00897B;
}
.cp_link:hover {
	animation: zoom .3s;
}
@keyframes zoom {
	50% {
		transform: scale(1.05);
	}
}

HOVERで文字が少し傾く

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	display: inline-block;
	transition: .3s;
	color: #EC407A;
}
.cp_link:hover {
	transform: rotate(2deg);
}

HOVERで文字がクルッと縦に回転

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link"><span>リンクテキスト-link text-</span></a>

.cp_link,.cp_link span {
	display: inline-block;
	color: #7CB342;
}
.cp_link span {
	transition: .5s;
}
.cp_link:hover span {
	transform: rotateX(360deg);
}

HOVERで文字が背景とともにクルッと縦に回転

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">
<span data-text="リンクテキスト-link text-">リンクテキスト-link text-</span>
</a>

.cp_link {
	display: inline-block;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	vertical-align: bottom;
	overflow: hidden;
}
.cp_link span {
	display: inline-block;
	position: relative;
	padding: 0.1em 0.3em;
	transition: .4s;
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
}
.cp_link span:after {
	display: inline-block;
	position: absolute;
	padding: 0.1em 0.3em;
	left: 0;
	top: 0;
	content: attr(data-text);
	color: #fff;
	background-color: #00ACC1;
	transform-origin: 50% 0%;
	transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.cp_link:hover span {
	background-color: #00ACC1;
	transform: translate3d(0, 0, -30px) rotateX(90deg);
}

HOVERで背景を横からスライド

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	padding: 0.1em 0.3em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,152,0,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
	color: #ff9800;
}
.cp_link:hover {
	background-position: -100% 0;
	color: #fff;
}

HOVERで背景を下からスライド

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	padding: 0.1em 0.3em 0em 0.3em;
	background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(33,150,244,1) 50%);
	background-position: 0 0;
	background-size: auto 200%;
	transition: .3s;
	color: #2196f4;
}
.cp_link:hover {
	background-position: 0 100%;
	color: #fff;
}

HOVERでアンダーラインがでる

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	padding: 0.1em 0.3em;
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #FF8F00;
}
.cp_link::after {
	position: absolute;
	bottom: .3em;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #FF8F00;
	opacity: 0;
	transition: .3s;
}
.cp_link:hover::after {
	bottom: 0;
	opacity: 1;
}

HOVERでアンダーラインが横からでる

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	padding: 0.1em 0.3em;
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #AB47BC;
}
.cp_link::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #AB47BC;
	transition: .3s;
}
.cp_link:hover::after {
	width: 100%;
}

HOVERで上下ラインが両サイドからでる

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	position: relative;
	padding: 0.1em 0.3em;
	display: inline-block;
	transition: .3s;
	color: #00ACC1;
}
.cp_link::before,
.cp_link::after {
	position: absolute;
	content: '';
	width: 0;
	height: 1px;
	background-color: #00ACC1;
	transition: .3s;
}
.cp_link::before {
	top: 0;
	left: 0;
}
.cp_link::after {
	bottom: 0;
	right: 0;
}
.cp_link:hover::before,
.cp_link:hover::after {
	width: 100%;
}

HOVERでアンダーラインが中央からでる

ニャン易度

リンクテキスト-link text-

<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
	position: relative;
	padding: 0.1em 0.3em;
	display: inline-block;
	transition: .3s;
	color: #FFA000;
}
.cp_link::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #FFA000;
	transition: .3s;
	transform: translateX(-50%);
}
.cp_link:hover::after {
	width: 100%;
}