Shop Mobile More Submit  Join Login
×




Details

Submitted on
June 19, 2011
Image Size
2.7 KB
Resolution
132×119
Link
Thumb
Embed

Stats

Views
3,281
Favourites
32 (who?)
Comments
23
Downloads
142
×
Pure CSS Fancy Buttons by spiceofdesign Pure CSS Fancy Buttons by spiceofdesign
This is out of boredom partially, but also curiosity. After seeing Elementary OS's new website, I noticed (peering around in the code) that they used images for the buttons on their website. And so I thought, could those lovely buttons be reproduced in just CSS. And, an idea struck me. I could use CSS inset shadows to create the highlights. Here is a live demo: [link]

Tested in Chrome 12 and Firefox 3.6, although earlier versions probably work. One thing I would like to add is CSS transitions, although I haven't got them to work yet.


Update
Been playing around with ideas for a micrblogging CMS, like Tumblr, but a bit prettier and installed on your own server, so you have total control. Anyway, it expands on my fancy buttons experiment with by adding forms. See it here: [link]
Add a Comment:
 
:iconlewxx:
LewxX Featured By Owner Nov 14, 2012  Student Interface Designer
thanks !!
Reply
:iconirmantas-11:
irmantas-11 Featured By Owner Jul 10, 2011
Really nice :)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jul 10, 2011  Hobbyist Interface Designer
Thanks!
Reply
:iconseahorsepip:
Seahorsepip Featured By Owner Jul 4, 2011  Professional Interface Designer
css transitions isn't hard but doesn't work on ff3 ;)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jul 4, 2011  Hobbyist Interface Designer
What the transitions don't work, or the whole buttons don't? Well I haven't added the transitions yet, and they are webkit only for the moment, whereas Firefox is gecko. Also -moz-linear-gradient was not introduced until Firefox 3.5 or 3.6, so the gradients would not show up in Firefox 3.
Reply
:iconseahorsepip:
Seahorsepip Featured By Owner Jul 4, 2011  Professional Interface Designer
I mean that transitions are quite buggyish in ff3 and work best in ff4
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jul 4, 2011  Hobbyist Interface Designer
I only play around with webkit stuff since I switched to Chrome, so I haven't had much experience with Firefox and CSS3. But I agree; transitions seem to be the most buggy thing in CSS3.
Reply
:iconmoeenn:
moeenn Featured By Owner Jul 2, 2011  Student Interface Designer
I think google saw this design before anyone else. I just looks cool
Reply
:iconkhampal:
khampal Featured By Owner Jun 19, 2011
I quite like these. I had a go several months back at the same thing whilst a bit bored: [link]
I think perhaps in the future we will have an option for users to switch to an experimental css3 theme for those who have suitable browsers. :)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
I agree. I tried to match the images as much as possible, but I did not think about moving the inset shadows both horizontally and vertically. One thing I added is a hover state, which I think the current site could do with as it would make it more obvious when the user is hovering on an icon.
Reply
:iconzeeeeee:
zeeeeee Featured By Owner Jun 19, 2011
excellent.
Reply
:iconbassultra:
BassUltra Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
[link]

That's what it looks like on opera.
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
The bottom one seems to have degraded a little better. I'll have a look to try and get them to degrade better.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Jun 19, 2011  Professional Interface Designer
Very cool dude! I wish we could go all CSS but unfortunately we do have to support older browsers :( Maybe someday soon we can use all the coolest new tech and the website will be super fast ;)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
You could use an image fall back instead of image first. Other than that Kudos on the new site. One thing I could suggest is some sort of feature suggest, that could work like the answers section.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Jun 19, 2011  Professional Interface Designer
File a bug :) I'm sure one of the guys could look at it.

Yea, we're working on it ;) We've got a lot of little projects for the website we're baking.
Reply
:iconbassultra:
BassUltra Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
It doesn't work on opera. :|
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
IMHO Opera sucks. They claim to support standards, but won't even support basic stuff like gradients. So I don't develop for them. I'm interested to see how it falls back though since I don't have Opera installed.
Reply
:iconisgie:
isgie Featured By Owner Jun 19, 2011
Well polished :)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
Thanks
Reply
:icongazornonplat:
gazornonplat Featured By Owner Jun 19, 2011  Hobbyist General Artist
Neat. I did notice this on their site too, CSS is a wondeful thing.
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 19, 2011  Hobbyist Interface Designer
Well, they cheat and use images, whereas this is just css.
Reply
:iconagent00tai:
agent00tai Featured By Owner Jun 21, 2011
well this is CSS3 though and we want to support also older browsers, with this release of the site at least
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Jun 21, 2011  Hobbyist Interface Designer
Well I would do it with this (or a modified version) as the basic version, with image fall backs for older browsers. If you do keep on using images, at least add a hover state.
Reply
Add a Comment: