ホーム » ブログ »  コピペーでCSSのアンカーリンクデザイン例
このエントリーをはてなブックマークに追加
@2018/05/11

スポンサーリンク
僕が持っている複数のサイトにアンカーリンクのデザインを適用する予定ですので、ここでメモする。
<style>
a {
	text-decoration: none;
}
/*-------------------------------------------------
 * アンダーバーFrom left to righ
 *-------------------------------------------------*/
a.underline-left-to-right {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a.underline-left-to-right::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
}
a.underline-left-to-right:hover::after {
  width: 100%;
}
/*-------------------------------------------------
 * アンダーバーFrom center to outside
 *-------------------------------------------------*/
a.underline-center-to-outside {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a.underline-center-to-outside::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #2ecc71;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
a.underline-center-to-outside:hover::after {
  width: 100%;
}
/*-------------------------------------------------
 * アンダーバーfadein
 *-------------------------------------------------*/
a.underline-fadein {
  position: relative;
  display: inline-block;
  transition: .3s;
}
a.underline-fadein::after {
  position: absolute;
  bottom: .3rem;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #2ecc71;
  opacity: 0;
  transition: .3s;
}
a.underline-fadein:hover::after {
  bottom: 0;
  opacity: 1;
}
/*-------------------------------------------------
 * 背景色を下から上に塗る
 *-------------------------------------------------*/
a.bgcolor-bottom-to-top {
  background-position: 0 0;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(46,204,113,1) 50%);
  background-size: auto 200%;
  transition: .3s;
}
a.bgcolor-bottom-to-top:hover {
  background-position: 0 100%;
  color: #fff;
}
/*-------------------------------------------------
 * 文字を拡大に表示
 *-------------------------------------------------*/
a.font-scale {
  display: inline-block;
  transition: .1s;
}
a.font-scale:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: .8s;
  transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0)
}
/*-------------------------------------------------
 * tableのセルを拡大に表示
 *-------------------------------------------------*/
table.cell-scale {
	width: 450px;
	border-collapse: collapse;
	border: 1px #CCC solid;
}
table.cell-scale th, table.cell-scale td {
	border: 1px #CCC solid;
	width: 33%;
	transition: .1s;
}
table.cell-scale td:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: .1s;
  transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0);
  background: green;
}

</style>


<b>マウスをリンクに乗せてみてね:</b><br>
<hr>

<a href="https://www.benri.jp" class="underline-left-to-right">アンダーバーFrom left to right</a>
<br>
<a href="https://www.benri.jp" class="underline-center-to-outside">アンダーバーFrom center to outside</a>
<br>
<a href="https://www.benri.jp" class="underline-fadein">アンダーバーフェードイン</a>
<br>
<a href="https://www.benri.jp" class="bgcolor-bottom-to-top">背景色を下から上に塗る</a>
<br>
<a href="https://www.benri.jp" class="font-scale">文字を拡大</a> に表示する
<br><br>

<b>おまけ:</b>
<hr>
 ⇒テーブルのセルにマウスオーバーにすると、セルに色に塗りながら拡大に表示します。
<table class="cell-scale">
	<tr>
		<td>
		内容1-1
		</td>
		<td>
		内容1-2
		</td>
		<td>
		内容1-3
		</td>
	</tr>
	<tr>
		<td>
		内容2-1
		</td>
		<td>
		内容2-2
		</td>
		<td>
		内容2-3
		</td>
	</tr>
	<tr>
		<td>
		内容3-1
		</td>
		<td>
		内容3-2
		</td>
		<td>
		内容3-3
		</td>
	</tr>
</table>


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

check