Permalink
Browse files

Introduce two button mixins

.button and .buttonBackground to make the creation of buttons much
easier
  • Loading branch information...
jayj committed Oct 14, 2012
1 parent 483b45d commit 957451e9c5d869d66eb729d508c67ccf68c1fdd7
Showing with 34 additions and 0 deletions.
  1. +34 −0 less/mixins.less
View
@@ -80,6 +80,40 @@
padding: @padding;
}
+// Buttons
+// -------------------------
+.button(@startColor, @endColor, @textColor: @grayDark, @shadowColor: fade(@white, 75%) ) {
+ .buttonBackground(@startColor, @endColor, @textColor, @shadowColor);
+ box-shadow: inset 0 1px 0 fade(@white, 20%), 0 1px 2px fade(@black, 5%);
+ border-radius: 3px;
+ #font > .alternative(16px, bold);
+ padding: 4px 14px;
+
+ &:focus {
+ .tab-focus;
+ }
+}
+
+
+.buttonBackground(@startColor, @endColor, @textColor: @grayDark, @shadowColor: fade(@white, 75%)) {
+ #gradient > .vertical(@startColor, @endColor);
+ background-repeat: repeat-x;
+ border: 1px solid;
+ border-color: @endColor @endColor darken(@endColor, 15%);
+ color: @textColor;
+ text-shadow: 0 1px 0 @shadowColor;
+
+ &:hover {
+ #gradient > .vertical(darken(@startColor, 3%), darken(@endColor, 5%));
+ color: @textColor;
+ .transition(background-position 100ms linear);
+ }
+
+ &:active {
+ box-shadow: inset 0 2px 4px fade(@black, 15%), 0 1px 2px fade(@black, 5%);
+ }
+}
+
// Sizing shortcuts
// -------------------------
.size(@width, @height) {

0 comments on commit 957451e

Please sign in to comment.