Blue Point Solutions

フリー3dスタイルCSS3ボタン

今回は、手軽に使えてとてもインパクトがある3d-CSS3ボタンを無料でご提供！！
オリジナルは、http://hellohappy.org/のChad Mazzolaが作成したのを、今回は、LESS用に書き換えました。LESSを使用しているので、簡単に色を変更できるように作ったので、どんなサイトにも使えるすぐれものです。
もちろん、商用も個人用もOK。

ファイルのダウンロード

CSS3の3DボタンのLESSコードは以下

// This is the basecolor,
// change this color to get (almost)any color you want
@base-color : #4162a8;
.punch-radius (@radius: 4px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}
// just separated from punch class b/c want to have clean code, thats all;
.punch-shadow(@a,@b,@c,@d) {
	-webkit-box-shadow: @a,@b,@c,@d;
	-moz-box-shadow: @a,@b,@c,@d;
	-ms-box-shadow: @a,@b,@c,@d;
	-o-box-shadow: @a,@b,@c,@d;
	box-shadow: @a,@b,@c,@d;
	//box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; Original Color
}
button.punch {
	.punch-radius;
	@scolor-a : hsl(hue(@base-color),(saturation(@base-color))+37,(lightness(@base-color))+19);
	@scolor-b : hsl(hue(@base-color),(saturation(@base-color))+1,(lightness(@base-color))-25);
	@scolor-c : hsl((hue(@base-color))-1,(saturation(@base-color))+2,17%);
	@scolor-d : hsl(0%,0%,(lightness(@base-color))-39);
	.punch-shadow(inset 0 1px 10px 1px @scolor-a, 0px 1px 0 @scolor-b, 0 6px 0px @scolor-c, 0 8px 4px 1px @scolor-d);
	background: @base-color;
	border-top: 1px solid darken(@base-color, 7%);
	border-right: 1px solid darken(@base-color, 25%);
	border-bottom: 1px solid darken(@base-color, 32%);
	border-left: 1px solid darken(@base-color, 25%);
	color: white;
	font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
	line-height: 1;
	margin-bottom: 10px;
	padding: 10px 0 12px 0;
	text-align: center;
	text-shadow: 0px -1px 1px #1E2D4D;
	width: 150px;
	-webkit-background-clip: padding-box;
}
 button.punch:hover {
	@scolor-a : hsl(hue(@base-color),(saturation(@base-color))+56,(lightness(@base-color))+30);
	@scolor-b : hsl(hue(@base-color),(saturation(@base-color))+1,(lightness(@base-color))-25);
	@scolor-c : hsl((hue(@base-color))-1,(saturation(@base-color))+2,17%);
	@scolor-d : hsl(0%,0%,(lightness(@base-color))-39);
 	.punch-shadow(inset 0 0px 20px 1px @scolor-a, 0px 1px 0 @scolor-b, 0 6px 0px @scolor-c, 0 8px 4px 1px @scolor-d);
    //box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; Original Color
    cursor: pointer;
}
	button.punch:active {
	@scolor-a : hsl(hue(@base-color),(saturation(@base-color))+37,(lightness(@base-color))+19);
	@scolor-b : hsl(hue(@base-color),(saturation(@base-color))+1,(lightness(@base-color))-25);
	@scolor-c : hsl((hue(@base-color))-1,(saturation(@base-color))+2,17%);
	@scolor-d : hsl(0%,0%,(lightness(@base-color))-39);
 	.punch-shadow(inset 0 1px 10px 1px @scolor-a, 0px 1px 0 @scolor-b, 0 2px 0px @scolor-c, 0 4px 3px 0px @scolor-d);
    //box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 10px;
}