So I've decided to post my little triumph's from building my facebook app as a have them in order to document it and help out anyone else who's in the same boat.  In this case I had wanted new button's that looked more buttony...jquery theme buttons kinda suck....so after scouring the internet I found something I liked, viewed the source and grabbed the code....after some tweaking to get the colors changed to the way I wanted it.  Pure css 3 button with rounded corners, drop shadow, text shadow that's cross browser compatible with latest IE, Chrome and Firefox. Here's the code for the button:

{codecitation class="brush: css; gutter: true;" width="650px" }

.css3-button {cursor:pointer;display: inline-block;padding:10px 15px 6px 15px;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;font: 12px "Lucida Grande", Sans-Serif;background-color: #b6d3f4;background-image: -webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important;background-image: -webkit-linear-gradient(top, #b6d3f4, #5483b8) !important;background-image: -moz-linear-gradient(top, #b6d3f4, #5483b8) !important;background-image: -ms-linear-gradient(top, #b6d3f4, #5483b8) !important;background-image: -o-linear-gradient(top, #b6d3f4, #5483b8) !important;box-shadow: inset 0 1px 1px white, 0 3px 3px rgba(0,0,0,0.6);border: 1px solid #9ac9ff !important;font-weight: 600;color: black !important;text-shadow: 0 -1px 0 rgba(256,256,256,0.3);text-decoration: none;margin: 0;position: relative;}

.css3-button:hover {color:white !important;text-shadow: 0 -1px 0 rgba(0,0,0,0.3);box-shadow: 0 2px 6px white inset, 0 3px 3px rgba(0, 0, 0, 0.6);}

.css3-button:hover .add-symbol {background-position: -24px -55px;}

.css3-button:active {color:white !important;box-shadow: 0 2px 6px white inset, 0 1px 1px rgba(0, 0, 0, 0.6);top: 2px;} {/codecitation}

Haven't updated my application yet..still testing the code locally....maybe today...but definitely by tomorrow,  My Tops