HTML
<a class='button3' href='#'>Tombol 3 Dimensi</a>CSS
.button3 { cursor:pointer; margin:10px 0px; background:#479ECD; padding:10px 15px; margin:4px 2px; font:bold 16px Arial,Sans-Serif; color:#fff; text-decoration:none; outline:none; text-shadow:0px -1px 0px #297EB9; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); } .button3:hover { -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); } .button3:active { position:relative; top:2px; -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); }Demo
Disederhanakan dari: http://css3exp.com/button
Sumber https://www.dte.web.id/