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>


5 Comments
Related Post

Join the Discussion!

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan