I have no idea if anyone will find these useful, but here's the css:

Code:

.css3_button {
        font-size: 12px;
        font-family: Verdana;
        font-weight: bold;
        background-color: hsl(120,70%,50%);
        background-image: -webkit-radial-gradient(top,rgba(255,255,255,0.5),transparent);
        background-image: -moz-radial-gradient(top,rgba(255,255,255,0.5),transparent);
        background-image: -o-radial-gradient(top,rgba(255,255,255,0.5),transparent);
        background-image: radial-gradient(top,rgba(255,255,255,0.5),transparent);
        background-position: center top;
        background-size: 150% 100%;
        color: white;
        text-shadow:  0px -1px 1px black, 0px 0px 3px white;
-webkit-border-radius: 3px;
  -moz-border-radius: 3px;
    -o-border-radius: 3px;
        border-radius: 3px;
-webkit-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(255,255,255,0.3), 0px 2px 6px rgba(0,0,0,0.6);
  -moz-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(255,255,255,0.3), 0px 2px 6px rgba(0,0,0,0.6);
    -o-box-shadow: inset 0px -3px 0px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(255,255,255,0.3), 0px 2px 6px rgba(0,0,0,0.6);
        box-shadow: inset 0px -3px 0px rgba(0,0,0,0.3), inset 0px 1px 0px rgba(255,255,255,0.3), 0px 2px 6px rgba(0,0,0,0.6);
        border: none;
        cursor: pointer;
        padding: 5px 10px 9px;
        margin: 1px;
}

Just add the 'css3_button' to a <button> element, and change the 'background-color' property as you see fit. eg:

Code:

<button class="css3_button" style="background-color: red;">CSS3 Awesomeness</button>

Cheers.

Wow.. awesome idea man..
I've seen 3d button with CSS, but not like this

Wow, that's pretty cool.

Is a neat trick but screw that the code is going to take longer to load than an image would haha.

virtuosity wrote:Is a neat trick but screw that the code is going to take longer to load than an image would haha.

Still a nice trick for people who don't know how to use Photoshop or just want to showcase their skills with coding.

Really awesome code.

Thanks Alot And Nice Trick

That loads slower than me running on flypaper!

Slower? There are no images. And the css alone is less bytes than any image you could slap on it. I blame your ISP, your Computer, and your fly paper.

Kryptonian wrote:Slower? There are no images. And the css alone is less bytes than any image you could slap on it. I blame your ISP, your Computer, and your fly paper.

Depending on the image

Mr.Axtrix wrote:

Kryptonian wrote:Slower? There are no images. And the css alone is less bytes than any image you could slap on it. I blame your ISP, your Computer, and your fly paper.

Depending on the image

He is sort of right. To show an image all a browser has to do is load a file. For CS images the browser must render the effects in-browser. The lighting is what would affect these.

LH Justin wrote:

Mr.Axtrix wrote:

Kryptonian wrote:Slower? There are no images. And the css alone is less bytes than any image you could slap on it. I blame your ISP, your Computer, and your fly paper.

Depending on the image

He is sort of right. To show an image all a browser has to do is load a file. For CS images the browser must render the effects in-browser. The lighting is what would affect these.

And also the internet conection

Mr.Axtrix wrote:

LH Justin wrote:

Mr.Axtrix wrote:

Kryptonian wrote:Slower? There are no images. And the css alone is less bytes than any image you could slap on it. I blame your ISP, your Computer, and your fly paper.

Depending on the image

He is sort of right. To show an image all a browser has to do is load a file. For CS images the browser must render the effects in-browser. The lighting is what would affect these.

And also the internet conection

Yeah, but for me they're both loaded as soon as I view the page.

Dittto

Doesn't really matter now days most internet users have at least 6MB connections if not more. Images or not it will load quick. Just rather design my own because you can get affects you can't with CSS3 as well as it is faster to design one then to code something that long.

virtuosity wrote:Doesn't really matter now days most internet users have at least 6MB connections if not more. Images or not it will load quick. Just rather design my own because you can get affects you can't with CSS3 as well as it is faster to design one then to code something that long.

Very true. Doesn't make it not cool though.

virtuosity wrote:Doesn't really matter now days most internet users have at least 6MB connections if not more. Images or not it will load quick. Just rather design my own because you can get affects you can't with CSS3 as well as it is faster to design one then to code something that long.

Eroor i have 2MB

wow nice never really understood css

Mr.Axtrix wrote:

virtuosity wrote:Doesn't really matter now days most internet users have at least 6MB connections if not more. Images or not it will load quick. Just rather design my own because you can get affects you can't with CSS3 as well as it is faster to design one then to code something that long.

Eroor i have 2MB

Well then you sir are on the lower end of users internet speed. BUT still good enough.