Tombol Link 3D Button

Tombol link 3D button
tombol ini dapat digunakan untuk demoshow maupun download isi postingan yang sudah disediakan
dibawah ini adalah kode tombol link 3D button yang dapat diterapkan di area gadged maupun entri halaman baru HTML

<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu   a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #1919B3; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

 <p align="center">
     <div id="menu">
 <a href="http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>

<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu   a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

 <p align="center">
     <div id="menu">
 <a href="http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>

<style> .button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color: #00BFFF;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}}
</style>
 <p align="center">

    <a class="button homebutton" href="http://Your Link" rel="nofollow"
    style="float: center;" target="_blank"><span style="display:
    inline-block;">3D BUTTON</span></a></p>

<style>

a.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 28px Arial; /* font size and style */
    position: relative;
        top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
        margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px fff;
}
a.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
<a href="http://Your Link" class="css3dbutton">3D BUTTON</a>

<style type="text/css">

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}
.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
.cssbutton:visited{
color: black;
}
.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}
.cssbutton:active{
color: black;
}
</style>
<p>
<a href="http://Your Link" class="rssbutton">Menu 1</a>
<a href="http://Your Link" class="rssbutton">Menu 2</a>
</p> <a href="http://Your Link" class="cssbutton">3D BUTTON</a>
 <a href="http://Your Link" class="cssbutton">3D BUTTON</a></p>

<style type="text/css">
.container {
  margin: 50px auto;
  width: 480px;
  text-align: center;
}
.container .button {
  margin: 10px;
}
.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 15px 0 15px;
  line-height: 35px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  background: #576dce;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #374fbb #344cb3 #2b3e94;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  background-image: -webkit-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: -moz-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: -o-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: linear-gradient(to bottom, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:hover, .button.hover {
  background-color: #5f74d0;
  border-color: #2d429c #2d429c #253680;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
}
.button:active, .button.active {
  border-color: #253680 #2b3e94 #3147a8;
  background: #475fc9;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button:before {
  content: '';
  position: absolute;
  top: 9px;
  right: 12px;
  width: 17px;
  height: 17px;
  background: #374fbb;
  border-radius: 9px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
}
.button:after {
  content: '>';
  float: right;
  position: relative;
  margin-left: 15px;
  font: bold 18px/33px "Comic Sans MS";
  /* I tried everything but couldn't get the vertical alignment to be
     consistent in IE, so this is a hack targeting IE8-9-10. */
  line-height: 31px\0;
  color: #6377d1;
  text-shadow: 0 -1px #8696dc, 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: subpixel-antialiased;
}
.button-green {
  background: #75a940;
  border-color: #5b8432 #567d2f #425f24;
  background-image: -webkit-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: -moz-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: -o-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: linear-gradient(to bottom, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
}
.button-green:hover, .button-green.hover {
  background-color: #7ab043;
  border-color: #476627 #476627 #354d1d;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
}
.button-green:active, .button-green.active {
  border-color: #354d1d #425f24 #4f722b;
  background: #6b9a3a;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-green:before {
  background: #5b8432;
}
.button-green:after {
  color: #7db444;
  text-shadow: 0 -1px #94c462, 0 1px 1px rgba(0, 0, 0, 0.3);
}
.button-red {
  background: #cf3e38;
  border-color: #ab2e29 #a32c27 #82231f;
  background-image: -webkit-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: -moz-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: -o-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: linear-gradient(to bottom, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
}
.button-red:hover, .button-red.hover {
  background-color: #d14640;
  border-color: #8a2521 #8a2521 #6d1e1a;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
}
.button-red:active, .button-red.active {
  border-color: #6d1e1a #82231f #962924;
  background: #c3352f;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-red:before {
  background: #ab2e29;
}
.button-red:after {
  color: #d24a44;
  text-shadow: 0 -1px #db6e69, 0 1px 1px rgba(0, 0, 0, 0.3);
} 
    </style>
<div class="container">
<a href="http://Your Link" class="button">Start</a><a href="http://Your Link" class="button button-green">Start</a><a href="http://Your Link" class="button button-red">Start</a><br><a href="http://Your Link" class="button hover">Start</a><a href="http://Your Link" class="button button-red hover">Start</a>
<a href="http://Your Link" class="button button-green hover">Start</a> </div>

Penjelasan :
Terapkan Link dan edit kode yang di warnai sesuai keinginan

All Sources
Edited by. Myscript2010

Test Script Untuk melihat hasil