Thread: playing with css 3

I have been playing with css 3 this morning, and I created some buttons.

please let me know what you think: CSS3 buttons by welshstew

Code:

<div class="buttons"> 
    <a href=""><span>1</span></a> 
    <a href=""><span>2</span></a> 
    <a href=""><span>3</span></a> 
    <a href=""><span>4</span></a> 
</div>

Code:

html body { background:#575759; }
.buttons { width: 390px; margin: 0 auto; }
.buttons a { width:77px; height:77px; float: left; position: relative; margin: 0 0 0 15px; font: bold 45px Arial, sans-serif; text-decoration: none; color: #efefef; text-shadow: #0a3b7b 0 1px 0, rgba(255, 255, 255, 0.5) 0 0 5px; border: solid 1px #0a3b7b; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #2098e4; background-image: -moz-linear-gradient(top, #2098e4, #105cbe 75%); background-image: -webkit-gradient(radial, center center, 10, center center, 300, from(rgba(150, 0, 0, 0)), to(rgba(150, 0, 0, 1.00)) ), -webkit-gradient(linear, left top, left bottom, color-stop(0, #2098e4), color-stop(0.75, #105cbe)); }
.buttons a:after { left: 0; top: 0; right: 0; bottom: 0; border: solid 1px rgba(255, 255, 255, 0.5); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; position: absolute; }
.buttons a:before { left: -5px; top: -5px; right: -5px; bottom: -5px; border: solid 4px rgba(0, 0, 0, 0.2); -webkit-border-radius: 55px; -moz-border-radius: 55px; border-radius: 55px; content: ""; position: absolute; }
.buttons a:hover { background-color: #22a1f1; background-image: -moz-linear-gradient(top, #22a1f1, #1162ca 75%); background-image: -webkit-gradient(radial, center center, 10, center center, 300, from(rgba(150, 0, 0, 0)), to(rgba(150, 0, 0, 1.00)) ), -webkit-gradient(linear, left top, left bottom, color-stop(0, #22a1f1), color-stop(0.75, #1162ca)); }
.buttons span { position:absolute; margin:12px 0px 0px 25px; }

now in green too:

green css3 round buttons

They are looking really good.

I currently use border-radius and box-shadow in designs.

The thing that puts me off using CSS3 currently is the huge amount of code it requires. Take border-radius for example.

Code:

div { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }

I have to use 3 declarations to do exactly the same thing. It just looks and feels messy. This is why I still often find myself using :hover and tweaking the background image position.

CSS3 usage is also a little limited as you can only use it to progressively enhance design's. In many situations this is fine. However, often I find clients surfing the web in IE7/IE8 asking where the magic is. Answering, "it's in Chrome / Firefox / Opera / IE9" just doesn't cut it.

Of course, your buttons are just another example of the exciting opportunities CSS3 gives designers. As IE9 will eventually be rolled out over IE8 and IE6/7 continue to fall away more and more projects will be able to better utilize these features.

Here is another good example that featured recently on nettuts: Tuts

Thanks Jason, much appreciated. I am just having some fun and learning for now.

I agree that at the moment it is a mess, but hopefully it will sort itself out soon and we can get a consistent implementation across browsers.

green round with a floating sub

Not sure about this one, as it blurs the numbers on the transition.

[edit] the blurring only happens on fiddle so copy the code locally to see it in all it's glory [/edit]

I just hacked this in chrome. I prefer this effect if you was going to have text coming down underneath. It is a little more subtle and as the background merges with the circle it looks like it is all part of the same element.

Stew's Green Buttons Updated

excellent stuff, guess its best to learn now rather than later, which is pretty much what my mentality has been as its not practical to use on a live website just yet.

I just hacked this in chrome. I prefer this effect if you was going to have text coming down underneath. It is a little more subtle and as the background merges with the circle it looks like it is all part of the same element.

Stew's Green Buttons Updated

Originally Posted by Jason

Awesome, I was practising for a css3 comp - is it ok if I enter this and we split the prize?

Actually, going to enter this, but only if you are ok and we split the prize.
Stew's Green Buttons Update 12

Awesome, I was practising for a css3 comp - is it ok if I enter this and we split the prize?

Originally Posted by WelshStew

Go for it. Whats the prize? Its 95% your work, i think I added like 4 lines, there is not need to split the prize... unless it is something awesome, in which case Gimmie!

There is a little display bug going on. Due to transparency doubling up, the bottom half of the circle border becomes darker when you hover over the text. You might want to sort that out before submitting.

Credit where it is worth mate! The prize isn't much - mugs and t-shirts I think so happy to share to love (that is if I win)

These look really good. I love the gradient effect. Great job.