影付きボタン|クリックで沈むレスポンシブWebデザイン

Demo

HTML&CSS

HTMLindex.htmldownload

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

CSSstyle.cssdownload

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