Welcome to Creative Nation!

Welcome to Creative Nation, . Feel free to browse our forums and help yourself to all our free tutorials, images, and recources!

Download

To download this script go back to article »

Member Login

Lost your password?

Not a member yet? Sign Up!

3D CSS3 Buttons


The next generation of web design.


You are not connected. Please login or register

3D CSS3 Buttons

Go down  Message [Page 1 of 1]

1 3D CSS3 Buttons on 7/13/2011, 2:21 pm

Kryptonian

Kryptonian







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. Big Grin

2 Re: 3D CSS3 Buttons on 7/13/2011, 2:25 pm

Gangstar15

Gangstar15

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

3 Re: 3D CSS3 Buttons on 7/13/2011, 4:27 pm

LH Justin

LH Justin
Wow, that's pretty cool. Smile



http://www.lhjgraphics.net/

4 Re: 3D CSS3 Buttons on 7/13/2011, 8:59 pm

virtuosity

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

5 Re: 3D CSS3 Buttons on 7/13/2011, 9:28 pm

LH Justin

LH Justin
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.



http://www.lhjgraphics.net/

6 Re: 3D CSS3 Buttons on 7/14/2011, 11:33 am

Mr.Axtrix

Mr.Axtrix

Really awesome code.

7 Re: 3D CSS3 Buttons on 7/14/2011, 1:45 pm

ArChKnIgHt

ArChKnIgHt

Thanks Alot And Nice Trick




http://ultragamerz.forumotion.net/

8 Re: 3D CSS3 Buttons on 7/14/2011, 4:41 pm

Saxaca

Saxaca

That loads slower than me running on flypaper! Tongue

9 Re: 3D CSS3 Buttons on 7/14/2011, 4:43 pm

Kryptonian

Kryptonian
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. Tongue



10 Re: 3D CSS3 Buttons on 7/14/2011, 5:10 pm

Mr.Axtrix

Mr.Axtrix

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. Tongue

Depending on the image

11 Re: 3D CSS3 Buttons on 7/14/2011, 5:18 pm

LH Justin

LH Justin
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. Tongue

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.



http://www.lhjgraphics.net/

12 Re: 3D CSS3 Buttons on 7/14/2011, 7:24 pm

Mr.Axtrix

Mr.Axtrix

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. Tongue

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

13 Re: 3D CSS3 Buttons on 7/14/2011, 7:32 pm

LH Justin

LH Justin
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. Tongue

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.



http://www.lhjgraphics.net/

14 Re: 3D CSS3 Buttons on 7/14/2011, 7:58 pm

Ronin

Ronin

Dittto



15 Re: 3D CSS3 Buttons on 7/14/2011, 8:55 pm

virtuosity

virtuosity
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.

16 Re: 3D CSS3 Buttons on 7/14/2011, 9:06 pm

LH Justin

LH Justin
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. Tongue



http://www.lhjgraphics.net/

17 Re: 3D CSS3 Buttons on 7/15/2011, 6:22 am

Mr.Axtrix

Mr.Axtrix

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

18 Re: 3D CSS3 Buttons on 8/2/2011, 6:46 am

Maxxamillion

avatar

wow nice never really understood css

19 Re: 3D CSS3 Buttons on 8/3/2011, 1:12 am

virtuosity

virtuosity
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.

Sponsored content


Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

.

Make a forum | © PunBB | Free forum support | Contact | Report an abuse | Forumotion.com.