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

CSS HTML
Update 2018.01.15

htmlとcssだけでできるテキストリンクデザイン12選です。

色は好みで変えていただければ、かまいません。
色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

  • 3桁の16進数カラーコード(#000)
  • RGB色相・彩度・明度(rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

browser:  65 11 20 10 *一部11+ 

テキストリンクデザイン [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で文字が拡大

ニャン易度
<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で文字が少し拡大して戻る

ニャン易度
<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で文字が少し傾く

ニャン易度
<a href="#" class="cp_link">リンクテキスト-link text-</a>
.cp_link {
display: inline-block;
transition: .3s;
color: #EC407A;
}
.cp_link:hover {
transform: rotate(2deg);
}

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

ニャン易度
<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で文字が背景とともにクルッと縦に回転

ニャン易度
<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で背景を横からスライド

ニャン易度
<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で背景を下からスライド

ニャン易度
<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でアンダーラインがでる

ニャン易度
<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でアンダーラインが横からでる

ニャン易度
<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で上下ラインが両サイドからでる

ニャン易度
<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でアンダーラインが中央からでる

ニャン易度
<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%;
}

第2弾はホバーで形が変わるものを多めに集めました

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?