Create multi-line signup buttons in pure CSS with Sass and Compass

Posted by jlong on Tuesday October 19, 2010 @07:22PM
from the wiseheartdesign.com dept.

http://wiseheartdesign.com/articles/2010/10/19/multi-line-buttons-with-compass-sass-and-css3/

( 8 comments | 29 points | on HN )

Re:Create multi-line signup buttons in pure CSS with Sass an... by bkudria on Tuesday October 19, 2010 @07:50PM (#1809332)

Demo: http://chriseppstein.github.com/sass-recipes/recipes/multi-l...

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by Groxx on Tuesday October 19, 2010 @11:21PM (#1809819)

Interesting... dragging it in Firefox makes it look like it's an image (the whole final graphic gets dragged), but not in other browsers that I've tried.

Is that just how FF handles block (vs inline) links? I've never noticed it before.

And good job (to the author), they look quite nice :) The post is an interesting look into more sass code than I've seen so far (not that I've looked far). Makes me want to get into it more.

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by akamaka on Tuesday October 19, 2010 @09:03PM (#1809510)

Thank you!

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by cheald on Wednesday October 20, 2010 @05:54AM (#1810598)

You might check out CSS3Pie, as well. Combined with Sass, you can get nearly-complete effects in IE, as well. I did a little writeup on it here: http://www.coffeepowered.net/2010/09/02/pain-free-css3-with-...

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by fookyong on Tuesday October 19, 2010 @09:51PM (#1809636)

nice proof-of-concept but after looking at the libraries and non-standard css required, I couldn't help but think "...yeah or I could just do them in photoshop".

the A/B test fanatics out there will cry "but this will allow you to test hundreds of different CTAs in a fraction of the time!" - which is all well and good but really, if you're a startup and you're analyzing to the extent where you are trying out hundreds of different CTAs and need a framework to manage it all... you should probably read this:

http://en.wikipedia.org/wiki/Analysis_paralysis

and focus on building a feature that benefits a customer.

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by bradgessler on Tuesday October 19, 2010 @10:02PM (#1809652)

Faster page-load times benefit the customer.

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by psadauskas on Wednesday October 20, 2010 @12:48AM (#1810024)

I like being able to change the wording of my buttons, and the color, and everything else, without having to leave my text editor.

[ Parent | on HN ]

Re:Create multi-line signup buttons in pure CSS with Sass an... by sp4rki on Wednesday October 20, 2010 @02:22AM (#1810246)

Libraries? Do you mean Sass and Compass? You don't need them to make the exact same effect, but it's just smart to do so because it will take you a lot less time and headaches. Besides, you just serve a compiled version so you're basically retaining the ability to create and define multiline buttons in CSS3 while retaining the ability to edit your source quickly and easily in Sass/Compass. And yeah I'd also make an image version for the browsers that don't support it CSS3. The benefits in loading time, bandwidth, and fewer http requests are worth it.

[ Parent | on HN ]