Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
3,087
Favourites
31 (who?)
Comments
23
Downloads
136
×
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
Add a Comment: