Skip to content

Instantly share code, notes, and snippets.

@jlong

jlong/_multi-line-button.scss

Created October 20, 2010 15:45
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jlong/636663 to your computer and use it in GitHub Desktop.
Save jlong/636663 to your computer and use it in GitHub Desktop.
Download ZIP
Sass files converted to SCSS from the article: [Multi-line Buttons with Compass, Sass, and CSS3](http://wiseheartdesign.com/articles/2010/10/19/multi-line-buttons-with-compass-sass-and-css3/)
Raw
_multi-line-button.scss
@mixin multi-line-button($base-color) {
@include background-clip("padding-box");
border-width: 1px;
@include border-radius(6px);
border-style: solid;
color: white;
display: block;
margin: 0.2em auto;
padding: 12px 15px;
text-align: center;
text-decoration: none;
.title {
font-size: 24px;
font-weight: bold;
display: block;
@include opacity(0.9);
}
.subtitle {
font-size: 14px;
display: block;
margin-top: 4px;
@include opacity(0.7);
}
&:hover {
.title {
@include opacity(1);
}
.subtitle {
@include opacity(0.8);
}
}
&:active {
padding: 13px 15px 11px;
}
@if $base-color != none {
@include color-multi-line-button($base-color);
}
}
@mixin color-multi-line-button($base-color) {
$dark-color: darken($base-color, 10%);
$light-color: lighten($base-color, 10%);
$border-color: darken($base-color, 20%);
$light-border-color: lighten($base-color, 0%);
$highlight-color: transparentize(desaturate(lighten($base-color, 40%), 50%), 0.5);
$shadow-color: darken($base-color, 15%);
$text-shadow-color: darken($base-color, 15%);
background-color: $base-color;
@include linear-gradient(color-stops($light-color, $base-color, $dark-color));
border-color: $border-color;
border-left-color: $light-border-color;
border-top-color: $light-border-color;
@include box-shadow($highlight-color, 1px, 1px, 0, 0, inset);
color: white;
@include text-shadow($text-shadow-color, 0, 1px, 2px);
&:hover, &:focus {
@include linear-gradient(color-stops(lighten($light-color, 5%), lighten($base-color, 5%), $dark-color));
}
&:active, &.depressed {
@include linear-gradient(color-stops(desaturate(lighten($dark-color, 5%), 10%), desaturate($base-color, 10%)));
@include box-shadow(none);
border-color: $border-color;
}
}
Raw
multi-line-button.html
<!DOCTYPE html>
<html>
<head>
<title>Multi-Line Button</title>
<link href='multi-line-button.css' rel='stylesheet' />
</head>
<body>
<p>
The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.
</p>
<p>
<a class='multi-line-button' href='#' style='width:14em'>
<span class='title'>Start Free Trial</span>
<span class='subtitle'>30-days free! Signup in 60 seconds</span>
</a>
</p>
<p>
<a class='multi-line-button green' href='#' style='width:14em'>
<span class='title'>Start Free Trial</span>
<span class='subtitle'>30-days free! Signup in 60 seconds</span>
</a>
</p>
<p>
<a class='multi-line-button red' href='#' style='width:14em'>
<span class='title'>Start Free Trial</span>
<span class='subtitle'>30-days free! Signup in 60 seconds</span>
</a>
</p>
<p>
<a class='multi-line-button orange' href='#' style='width:14em'>
<span class='title'>Start Free Trial</span>
<span class='subtitle'>30-days free! Signup in 60 seconds</span>
</a>
</p>
</body>
</html>
Raw
multi-line-button.scss
@import "compass";
@import "multi-line-button";
@include global-reset;
body {
font-family: "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
padding: 30px;
text-align: center;
}
p {
margin: 1em 0;
}
a.multi-line-button {
@include multi-line-button(#60a3d8);
&.green {
@include color-multi-line-button(#63bb4a);
}
&.red {
@include color-multi-line-button(#bf4040);
}
&.orange {
@include color-multi-line-button(#d98026);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment