影付きボタン|マウスオーバーで沈むレスポンシブWebデザイン

Demo

HTML&CSS

HTMLindex.htmldownload

<button type="button" name="" value="" class="shadow_button2">Button</button>

CSSstyle.cssdownload

.shadow_button2{
	cursor: pointer;
	outline: none;
	padding: 1rem 2rem;
	box-shadow: 2px 2px 4px gray;
	border: 1px solid #ccc;
}
.shadow_button2:hover{
	transition: 0.5s;
	transform: translate3d(0,4px,0);
	box-shadow: none;
}
© 2025 wayday