TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Creating a Realistic Looking Button with CSS3

61 pointsby mikexstudiosabout 15 years ago

7 comments

jayairabout 15 years ago
I'm thinking of writing a couple more posts about the little details that improve the overall look and feel of interfaces. If you guys have any thoughts or ideas about it, do let me know.
评论 #1255505 未加载
评论 #1255397 未加载
评论 #1255392 未加载
DenisMabout 15 years ago
A great, detailed description of how to make a button look 3d. I don't care so much about the CSS part, it actually explains how the "light" behaves to create the 3d impression.<p>I think I'll use this to recreate the same in Cocoa. Just yesterday I was going crazy trying to create a decent looking custom UIToolBar button which would work with tinting. This might be the ticket.
评论 #1255350 未加载
评论 #1255359 未加载
rscottabout 15 years ago
I have little interest in CSS3 or buttons to be honest, but appreciate the love for the details here. The detailed breakdown made me smile.
pavsabout 15 years ago
Doesn't work on IE8. Active state missing on Opera. It looks nice though.
jayairabout 15 years ago
I saw this through Twitter, essentially the same thing that I have but done with just one input element. It works only on FF though. Still very impressive - <a href="http://twitter.com/dtinth/status/11969821668" rel="nofollow">http://twitter.com/dtinth/status/11969821668</a>
carteracabout 15 years ago
Thanks for this incredible post. Having spent most of my coding days with server side languages, this opened my eyes to the art form that is front-end design.
评论 #1255571 未加载
daleharveyabout 15 years ago
nice article, I like the attention to details, but if you are looking for something nice and quick and easy, copied and pasted from gmail<p><a href="http://pastebin.me/edc9b5fefc2cd756c7dd92452407a5b0" rel="nofollow">http://pastebin.me/edc9b5fefc2cd756c7dd92452407a5b0</a>