HTML
<a href="#">通常のテキストリンクはこんなかんじ</a>
時間指定（transition）
例えばマウスを乗せた時に背景色が変わる、線色が変わるといった動きを付ける場合、
動きを付ける要素に:hoverを付けて要素にマウスが乗ったらというどう動くのかを指定していきます。
この時:hoverを付けた要素へtransitionを使って時間を指定する事で、間を補完するようにアニメーションを付けられます。
※0.5sは0.5秒
CSSでデザイン／テキストリンク
HTML
<a href="#" class="link1">テキストリンク</a>
CSS
.link1 {
display: inline-block;
text-decoration: none;
padding: 0.1em 0.3em;
transition: all .3s;
}
.link1:hover {
color: #fff;
background-color: #00BCD4;
}
HTML
<a href="#" class="link2"><span>テキストリンク</span></a>
CSS
.link2,.link2 span {
display: inline-block;
text-decoration: none;
color: #ff4500;
}
.link2 span {
transition: .5s;
}
.link2:hover span {
transform: rotateX(360deg);
}
HTML
<a href="#" class="link3">テキストリンク</a>
CSS
.link3 {
display: inline-block;
text-decoration: none;
background-color: #00bfff;
color: #fff;
padding: 0.1em 0.3em;
transition: all .3s;
}
.link3:hover {
color: #fff;
background-color: #ff8c00;
}
HTML
<a href="#" class="link4">テキストリンク</a>
CSS
.link4 {
position: relative;
padding: 0.1em 0.3em;
text-decoration: none;
color: #c71585;
}
.link4::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: '';
transition: all 0.3s ease;
opacity: 0.8;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #c71585;
}
.link4:hover::after {
opacity: 1;
border-bottom-width: 2px;
border-bottom-style: dashed;
}
HTML
<a href="#" class="link5">テキストリンク</a>
CSS
.link5 {
margin: 5em auto;
text-align: center;
}
.link5 {
position: relative;
padding: 0.1em 0.3em;
transition: all 0.3s ease;
text-decoration: none;
color: #EC407A;
}
.link5::before {
position: absolute;
content: '';
left: 0;
bottom:0;
width: 100%;
height: 1%;
transition: all 0.3s ease;
opacity: 0;
background-color: #EC407A;
border-radius: 50px;
}
.link5::after {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
content: '';
transition: all 0.3s ease;
border-bottom: 2px solid #EC407A;
opacity: 1;
}
.link5:hover::before {
height: 100%;
opacity: 0.4;
}
.link5:hover::after {
left: 50%;
right: 50%;
width: 0%;
opacity: 0;
}
HTML
<a href="#" class="link6">テキストリンク</a>
CSS
.link6 {
padding: 0.1em 0.3em;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(178,34,34,1) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
color: #b22222;
}
.link6:hover {
background-position: -100% 0;
color: #fff;
}