Amazing 3D Pressed Button
Amazing 3d pressed button will rock your button style, it's look like professional button
Setelah sekian lama udah g di update blog ini akan kembali exist memberikan tutorial yang InsyaAllah bermanfaat bagi semua bloggers di Indonesia ini.
Tutorial kali ini bertemakan 3D Pressed Button. Sebenarnya sudah lama saya ingin memposting tentang tema ini tetapi belum sempat hingga sekarang ini.
Preview
Taruh kode CSS ini diatas ]]></b:skin>
CSS
.button, .button-bevel {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff!important;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 7px 20px 9px;
margin: .5em .5em .5em 0;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}
.button {border-radius: 2px;box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;}
.button:active {box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;}
.orange {
background: rgb(255,183,0);
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
border: 1px solid #e59500;
}
.orange:hover {
background: rgb(255,203,72);
background: -moz-linear-gradient(top, rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
background: -webkit-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: -o-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: -ms-linear-gradient(top, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
background: linear-gradient(to bottom, rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
.magenta {
background: rgb(255,130,172);
background: -moz-linear-gradient(top, rgba(255,130,172,1) 0%, rgba(247,37,129,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,130,172,1)), color-stop(100%,rgba(247,37,129,1)));
background: -webkit-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: -o-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: -ms-linear-gradient(top, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
background: linear-gradient(to bottom, rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
border: 1px solid #c60a56;
}
.magenta:hover {
background: rgb(255,155,189);
background: -moz-linear-gradient(top, rgba(255,155,189,1) 0%, rgba(248,62,143,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,155,189,1)), color-stop(100%,rgba(248,62,143,1)));
background: -webkit-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: -o-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: -ms-linear-gradient(top, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
background: linear-gradient(to bottom, rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}
.cyan {
background: rgb(130,207,241);
background: -moz-linear-gradient(top, rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1)));
background: -webkit-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -o-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -ms-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: linear-gradient(to bottom, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
border: 1px solid #3cafcf;
}
.cyan:hover {
background: rgb(153,216,244);
background: -moz-linear-gradient(top, rgba(153,216,244,1) 0%, rgba(79,183,236,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,216,244,1)), color-stop(100%,rgba(79,183,236,1)));
background: -webkit-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: -o-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: -ms-linear-gradient(top, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
background: linear-gradient(to bottom, rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}
.red {
background: #e25b53;
background: -moz-linear-gradient(top, #e25b53 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e25b53), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: -o-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: -ms-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: linear-gradient(to bottom, #e25b53 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
border: 1px solid #c42222;
}
.red:hover {
background: #dd7671;
background: -moz-linear-gradient(top, #dd7671 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd7671), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top, #dd7671 0%,#dd2011 100%);
background: -o-linear-gradient(top, #dd7671 0%,#dd2011 100%);
background: -ms-linear-gradient(top, #dd7671 0%,#dd2011 100%);
background: linear-gradient(to bottom, #dd7671 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}
.black {
background: #444444;
background: -moz-linear-gradient(top, #444444 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: -o-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: linear-gradient(to bottom, #444444 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
border: 1px solid #2a2a2a;
}
.black:hover {
background: #686868;
background: -moz-linear-gradient(top, #686868 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#686868), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top, #686868 0%,#1c1c1c 100%);
background: -o-linear-gradient(top, #686868 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top, #686868 0%,#1c1c1c 100%);
background: linear-gradient(to bottom, #686868 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}
.green {
background: #82cc5d;
background: -moz-linear-gradient(top, #82cc5d 0%, #53b73c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82cc5d), color-stop(100%,#53b73c));
background: -webkit-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
background: -o-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
background: -ms-linear-gradient(top, #82cc5d 0%,#53b73c 100%);
background: linear-gradient(to bottom, #82cc5d 0%,#53b73c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
border: 1px solid #429E34;
}
.green:hover {
background: #99cc80;
background: -moz-linear-gradient(top, #99cc80 0%, #53b73c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99cc80), color-stop(100%,#53b73c));
background: -webkit-linear-gradient(top, #99cc80 0%,#53b73c 100%);
background: -o-linear-gradient(top, #99cc80 0%,#53b73c 100%);
background: -ms-linear-gradient(top, #99cc80 0%,#53b73c 100%);
background: linear-gradient(to bottom, #99cc80 0%,#53b73c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}
.button-bevel {
vertical-align: top;
border-radius: 4px;
border: none;
padding: 10px 25px 12px;
}
.button-bevel:active {position: relative;top: 5px;}
.button-bevel.orange {box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.orange:active {box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.magenta {box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.magenta:active {box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.cyan {box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.cyan:active {box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.red {box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.red:active {box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
.button-bevel.black {box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;}
.button-bevel.black:active {box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px; }
.button-bevel.green {box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;}
.button-bevel.green:active {box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;}
Untuk menggunakan nya pakai kode
HTML dibawah ini dan anda bisa menaruhnya dimana saja.... Button Orange
<a class="button-bevel orange" href="javascript:void(0)"> Button </a>
Button Magenta
<a class="button-bevel magenta" href="javascript:void(0)"> Button </a>
Button Cyan
<a class="button-bevel cyan" href="javascript:void(0)"> Button </a>
Button Red
<a class="button-bevel red" href="javascript:void(0)"> Button </a>
Button Black
<a class="button-bevel black" href="javascript:void(0)"> Button </a>
Button Green
<a class="button-bevel green" href="javascript:void(0)"> Button </a>
