This button contains gradient and shadow effects without the use of actual graphics or JavaScript whatsoever.
I’m using just about every CSS style that could be used on the button for your reference. Although, some may find that it looks better by pulling a few styles back. You could always add more effects too.
Also, you’ll find as you change colors the shadows may no longer look good and become blurry. It’s a fine art to find that balance among different colors.
Note — This isn’t very friendly to older IE versions.
Demo
Code
HTML
<a href="#" class="bttn-style">Learn More</a>CSS
.bttn-style{display:inline-block;font-family:georgia,serif;font-size:20px;color:#fff;text-shadow:1px 1px 2px #000;text-decoration:none;padding:10px 15px;border:1px solid #09f;box-shadow:2px 2px 2px #333;background:linear-gradient(#40b3ff, #09f);opacity:0.9}
.bttn-style:hover{opacity:1}