NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

マウスオーバーした時に内側にラインを表示するボタン

2014年5月23日CSSテクニック

マウスホバーした時に内側にラインを表示する印象的なボタンをつくる

グリッド状に画像が敷き詰められたサイトなどでよく見るマウスオーバーアクションを、transform: scaleを応用して作ってみました。

デモページ

HTML

<div id="btn">
	<a href="javascript:void(0)">
		<p class="name">cow</p>
		<div class="img"><img src="img.jpg" width="481" height="319"></div>
		<span class="outline"></span>
	</a>
</div>

CSS

#btn {
	display: table;
	width: 481px;
	height: 319px;
	overflow: hidden;
	position: relative;
	z-index: 0;
	margin: 0 auto;
}
#btn a {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
}
#btn .name {
	position: relative;
	z-index: 3;
	font-weight: bold;
	color: #ffffff;
	font-size: 26px;
}
#btn .img {
	position: absolute;
	top: 0;
	z-index: 1;
	background: #000000;
}
#btn .img img {
	transition: .15s linear;
	-webkit-transition: .15s linear;
	-moz-transition: .15s linear;
	-o-transition: .15s linear;
}
#btn a:hover .img img {
	opacity: .3;
}
#btn .outline {
	position: absolute;
	top: 0;
	z-index: 2;
	border: 1px solid #ffffff;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(1.01, 1.01);
	-webkit-transform: scale(1.01, 1.01);
	-moz-transform: scale(1.01, 1.01);
	-o-transform: scale(1.01, 1.01);
	transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-moz-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
}
#btn a:hover .outline {
	opacity: 1;
	transform: scale(.93, .9);
	-webkit-transform: scale(.93, .9);
	-moz-transform: scale(.93, .9);
	-o-transform: scale(.93, .9);
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. マウスオーバーした時に内側にラインを表示するボタン

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com