Comments on: Type study: An all CSS button https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/ News about Typekit Sun, 06 Mar 2011 17:12:25 +0000 hourly 1 https://wordpress.org/?v=5.4.1 By: Surrey Web Design https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2288 Sun, 06 Mar 2011 17:12:25 +0000 http://blog.typekit.com/?p=3113#comment-2288 Great post Dan very useful. Thanks. Always have trouble smoothing out the translate transform.

]]> By: Jen Strickland https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2287 Thu, 03 Mar 2011 22:05:40 +0000 http://blog.typekit.com/?p=3113#comment-2287 Is it possible to unsubscribe from these comments?

]]> By: Rich https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2286 Thu, 03 Mar 2011 21:43:50 +0000 http://blog.typekit.com/?p=3113#comment-2286 In reply to Mike Pick.

I like the stickiness for sure.

How do you handle the shadow on the white having .2S delay on the click and return. you need 0s on the initial click down state but .2s delay in returning in order to synchronize the shadow to the button span animation.

]]> By: Rich https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2285 Thu, 03 Mar 2011 21:16:02 +0000 http://blog.typekit.com/?p=3113#comment-2285 in the last code bit for .btn span you introduce:

-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);

In the demo this code add light colored square corenrs at the bottom of the span taking away from the rounded corner feel. If you remove the code you get the nice round corners sans the light colored square corners.

]]> By: Brent Lagerman https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2284 Wed, 02 Mar 2011 20:57:24 +0000 http://blog.typekit.com/?p=3113#comment-2284 SO COOL, I love the button, you could do something cool on hover like maybe get rid of the drop shadow to make it look like it’s being pressed too… maybe even use css transforms to make it a little smaller, not sure if that’d look cheesy or not but there’s lots of possibilities.

]]> By: Honlapkészítés https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2283 Sun, 20 Feb 2011 01:37:29 +0000 http://blog.typekit.com/?p=3113#comment-2283 This is why I love typekit! Usable knowledge and great community.
Keep going! 🙂

]]> By: Joe C https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2282 Thu, 17 Feb 2011 20:31:28 +0000 http://blog.typekit.com/?p=3113#comment-2282 Dan the man! Thanks for bringing this to light. You do so much for the design community. We love you bro!

]]> By: Rob Lifford https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2281 Thu, 17 Feb 2011 15:13:24 +0000 http://blog.typekit.com/?p=3113#comment-2281 Here’s one thing I’ve found really useful: every browser that supports gradients also supports RGBA colors and multiple backgrounds, so instead of specifying your gradients with solid hex colors, place a translucent black or white gradient “mask” over a single solid background color. This makes for nice reusable code where you can swap out just one isolated color value at the end and get a different color buttona. So, instead of this:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));

Try this:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba( 255, 255, 255, .4 )), to( rgba( 255, 255, 255, 0)), #3194c6;

]]> By: Mike Locke https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2280 Thu, 17 Feb 2011 00:02:40 +0000 http://blog.typekit.com/?p=3113#comment-2280 ooh, me likes. Thanks for this.

]]> By: Chris https://blog.typekit.com/2011/02/10/type-study-an-all-css-button/#comment-2279 Wed, 16 Feb 2011 20:07:51 +0000 http://blog.typekit.com/?p=3113#comment-2279 Looks surprisingly similar to http://inspectelement.com/demos/css3/buttons/

]]>