マウスオーバーでネオンサインみたいに光るボタン

こんにちは。ささめまです。
生きてます！！死にそうになってたけど！出産しました！わーい

今回はネオンサインのように光るボタンをご紹介します。

＼ コピペでそのまま使えます ／

demo

button

code

<a href="#" class="button_link">button</button>
.button_link {
	width: 280px;
	height: 40px;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background-color: #81d8d0;
	display: block;
	transition: all 0.3s ease;
}
.button_link:hover {
	text-shadow:
		0 0 10px rgba(255,255,255, 1),
		0 0 50px rgba(255, 255, 255, .8),
		0 0 75px rgba(255, 255, 255, .6),
		0 0 76px rgba(255, 255, 255, .4),
		0 0 77px rgba(255, 255, 255, .5),
		0 0 78px rgba(255, 255, 255, .4),
		0 0 79px rgba(255, 255, 255, .3),
		0 0 80px rgba(255, 255, 255, .2),
		0 0 85px rgba(255, 255, 255, .1);
}

design

シャドウをいじくってネオンが光るようにジワッと光らせます。
黒背景のサイトに絶対とってもよく映える！！！！

タイトルとかにもおすすめなcssなのでぜひ使ってみてください