今回は、手軽に使えてとてもインパクトがある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; }
HTMLのマークアップはbuttonにpunchのclassをつけるだけ!
<button class="punch">Punch</button>