6 ms·

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

29 points by jlong 16y ago

bkudria 16y ago
Demo: http://chriseppstein.github.com/sass-recipes/recipes/multi-line-button/multi-line-button.html http://chriseppstein.github.com/sass-recipes/recipes/multi-l...
- akamaka 16y ago
  Thank you!
- Groxx 16y ago
  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.
fookyong 16y ago
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 http://en.wikipedia.org/wiki/Analysis_paralysis and focus on building a feature that benefits a customer.
- bradgessler 16y ago
  Faster page-load times benefit the customer.
- psadauskas 16y ago
  I like being able to change the wording of my buttons, and the color, and everything else, without having to leave my text editor.
- sp4rki 16y ago
  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.
cheald 16y ago
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-sass-and-csspie/ http://www.coffeepowered.net/2010/09/02/pain-free-css3-with-...

29 points by jlong 16y ago

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

akamaka 16y ago
Thank you!
Groxx 16y ago
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.

fookyong 16y ago

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 http://en.wikipedia.org/wiki/Analysis_paralysis and focus on building a feature that benefits a customer.

bradgessler 16y ago
Faster page-load times benefit the customer.
psadauskas 16y ago
I like being able to change the wording of my buttons, and the color, and everything else, without having to leave my text editor.
sp4rki 16y ago
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.

cheald 16y ago

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-sass-and-csspie/ http://www.coffeepowered.net/2010/09/02/pain-free-css3-with-...