Social Network for Web Professionals

Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Fancy CSS3 button

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

Rate this blog entry:
6
Effective Tips of Designing High Quality and User ...
Learn How Hackers Find Security Vulnerabilities. W...

Related Posts

Comments

 
No comments yet
Already Registered? Login Here
Guest
Friday, 07 August 2020
If you'd like to register, please fill in the username and name fields.

Captcha Image