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

View previous topic View next topic Go down  Message [Page 1 of 1]

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

Kryptonian

avatar







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

avatar

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

avatar
Wow, that's pretty cool. Smile



http://www.lhjgraphics.net/

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

virtuosity

avatar
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

avatar
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

avatar

Really awesome code.

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

ArChKnIgHt

avatar

Thanks Alot And Nice Trick




http://ultragamerz.forumotion.net/

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

Saxaca

avatar

That loads slower than me running on flypaper! Tongue

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

Kryptonian

avatar
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

avatar

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

avatar
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

avatar

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

avatar
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

avatar

Dittto



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

virtuosity

avatar
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

avatar
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

avatar

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



wow nice never really understood css

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

virtuosity

avatar
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


View previous topic View next topic Back to top  Message [Page 1 of 1]

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

.

Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum.