CSS
-Tricks
treehouse :
what would you like to learn today?
Web Design
Web Development
iOS Development
Show search box
Search
Search in:
All
Articles
Forums
Snippets
Videos
✕
Home
Forums
Snippets
Gallery
Videos
Almanac
Demos
Lodge
Navigation 'n' Search
Forums
Illustration by Nick Sirotich
Forums
»
CSS Combat
(yawn) - My boring button. Thoughts on how to spice it up?
travelvice
Permalink to comment
#
April 2011
This is an oh so simple CSS button concept in my footer:
http://i.imgur.com/2ocDD.png
(normal & with hover -- that's a tooltip w/
tipSwift
)
Any thoughts on how it could be spiced up?
lyleyboy
Permalink to comment
#
April 2011
Try making the text a little darker and adding a 1px white text shadow.
Also a very slight vertical gradient may help.
I think it looks nice the way it is to be honest. Don't fall into the trap of adding all the bells and whistles just because you can.
Brightonmike
Permalink to comment
#
April 2011
I think a gradient could help. But the trick with gradients is subtlety, almost the point you can barely see it. However, even aesthetic touches you can "barely" see cna have a big impact on the visual acuteness of your site.
travelvice
Permalink to comment
#
April 2011
With lyleyboy's suggestion:
darker text, 1px 90° white text-shadow:
http://i.imgur.com/JIzO1.png
travelvice
Permalink to comment
#
April 2011
Adding in gradient suggestions:
linear-gradient from #ececec to #dfdfdf
- plus -
inset 0px 1px 0px 0px #fff:
http://i.imgur.com/016WM.png
Add a Comment
http://i.imgur.com/2ocDD.png (normal & with hover -- that's a tooltip w/ tipSwift)
Any thoughts on how it could be spiced up?
Also a very slight vertical gradient may help.
I think it looks nice the way it is to be honest. Don't fall into the trap of adding all the bells and whistles just because you can.
darker text, 1px 90° white text-shadow: http://i.imgur.com/JIzO1.png
linear-gradient from #ececec to #dfdfdf
- plus -
inset 0px 1px 0px 0px #fff: http://i.imgur.com/016WM.png