More than 5 years have passed since last update.

WindowsXPライクなボタンをCSS3とSass(Compass)で作ろう

Last updated at 2013-05-22Posted at 2013-05-22

これが実際のXPのボタン

こんなの作ってみよう。

xplike.scss

input {
	padding: 5px 30px;
	color: #020167;
	font-weight: bold;
	background-color: rgb(252,252,250);
	@include background(linear-gradient(top, rgba(252,252,250,1) 0%,rgba(236,235,230,1) 100%));
	@include border-radius(3px);
	border: 1px solid #003c73;
	@include box-shadow(
		1px 0 0 #e6e1db,
		0 -1px 0 #e6e1db,
		-1px 0 0 #e6e1db,
		0 1px 0 #e6e1db,
		2px 0 0 #bcd4f6 inset,
		0 1px 0 #bcd4f6 inset,
		-2px 0 0 #bcd4f6 inset,
		0 -1px 0 #bcd4f6 inset
	);

	&:active {
		background-color: rgb(236,235,230);
		@include background(linear-gradient(top, rgba(236,235,230,1) 0%,rgba(252,252,250,1) 100%));
	}
}

できあがったもの

瓜二つというわけにはいかなかったけど、まあこんなもんじゃないでしょうか。mixinで使い回そう！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up