HOME | DD
spiceofdesign — Pure CSS Fancy Buttons
Published: 2011-06-19 15:44:17 +0000 UTC; Views: 3874; Favourites: 25; Downloads: 155
Redirect to original
Description
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]
Related content
Comments: 24
css transitions isn't hard but doesn't work on ff3
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
I mean that transitions are quite buggyish in ff3 and work best in ff4
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
I think google saw this design before anyone else. I just looks cool
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
The bottom one seems to have degraded a little better. I'll have a look to try and get them to degrade better.
👍: 0 ⏩: 0
Very cool dude! I wish we could go all CSS but unfortunately we do have to support older browsers 
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
File a bug 
Yea, we're working on it 
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
Neat. I did notice this on their site too, CSS is a wondeful thing.
👍: 0 ⏩: 1
Well, they cheat and use images, whereas this is just css.
👍: 0 ⏩: 1
well this is CSS3 though and we want to support also older browsers, with this release of the site at least
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0