A Pen by Erik Van Till.

index.html

<h1>Intelligent Buttons</h1>

<input type="submit" value="Intelligent Buttons" class="button violet">

<input type="submit" value="Intelligent Buttons" class="button blue">

<input type="submit" value="Intelligent Buttons" class="button green">


<input type="submit" value="Intelligent Buttons" class="button brown">

<input type="submit" value="Intelligent Buttons" class="button lightblue">

<input type="submit" value="Intelligent Buttons" class="button red">

<input type="submit" value="Intelligent Buttons" class="button orange">

<input type="submit" value="Intelligent Buttons" class="button yellow">


<input type="submit" value="Intelligent Buttons" class="button magenta">

<input type="submit" value="Intelligent Buttons" class="button white">

<input type="submit" value="Intelligent Buttons" class="button darkgreen">

<input type="submit" value="Intelligent Buttons" class="button">

<h2>Sizes</h2>
<input type="submit" value="Big Intelligent Buttons" class="button lightblue big">

<input type="submit" value="Normal Intelligent Buttons" class="button lightblue">

<input type="submit" value="Small Intelligent Buttons" class="button lightblue small">

<h3>How To</h3>

<p>If you want tu add your own colors just add in the <em>/*COLOR STYLES*/</em> section:</p>


<code>
  &.nameofyourClassColor{
		@include button(#ColorStart, #ColorEnd);
	}
</code>

<p>like in this example:</p>

<code>&.yellow{
		@include button(#FFF035, #FFC850);
	}</code>

<p>and the HTML will be something like</p>

<code>
  &lt;input type="submit" value="Big   Intelligent Buttons" class="button nameofyourClassColor"&gt;
  <br><br>
  or
  <br><br>
  &lt;a href="#" class="button nameofyourClassColor"&gt;Intelligent Buttons&lt;/a&gt;
</code>

<p>Also, with the magic of Scss/Compass, the mixin can know if the background is light or dark and use a constrasted color for the text (<a href="http://compass-style.org/examples/compass/utilities/contrast/">http://compass-style.org/examples/compass/utilities/contrast/</a>)</p>

<code>
  @include contrasted($colorEnd, #222, #FFF, 65%);
</code>

<br><br>
<hr>
<h3>Hi! my name is <a href="https://twitter.com/angelm if you send me a tweet to <a href="https://twitter.com/angelmoskera">@angelmoskera</a> or a mail to <a href="mailto:angelmoskera@gmail.com">angelmoskera@gmail.com</a> if you used,  so i put more effort in improve this and share other cool stoskera">angelmoskera</a></h3>
<>This is <strong>obviously</strong> free to use, but i will be gpladuff ;) </p>

Intelligent-Buttons.markdown

Intelligent Buttons

With the magic of Scss/Compass we can create easily amazing buttons.

A Pen by Erik Van Till on CodePen.

License.

style.scss

@import "compass";
@import 'compass/css3';
@import "compass/utilities/color/contrast";

h1,h2,h3,p{
  font-family: 'Rambla', sans-serif;
  
  a{ 
    color: #2363A3;
    text-decoration:none;
  }
}

body{
  padding: 0 1em;
  @include background(radial-gradient(100%, #FFF #DDD));
}

@mixin button($colorStart, $colorEnd){
	background: $colorStart;
	@include background(linear-gradient(top, $colorStart $colorEnd));
	@include box-shadow(0 0 2px $colorEnd);
	@include contrasted($colorEnd, #222, #FFF, 65%);

	&:hover{
  		background: $colorStart;
		@include background(linear-gradient(top, darken($colorStart, 5%) darken($colorEnd, 5%) ));
  	}

  	&:active{
		@include box-shadow(0px 0px 7px darken($colorStart, 45%) inset);
		border-width: 1px;
		border-color: #666 transparent transparent #666;
	}

}

.button{
	background: #444;
	@include background(linear-gradient(top, #666 #111));
	@include box-shadow(0 0 2px #111);
	border-color: transparent #666 #666 transparent;
	outline: 0;
  color: #FFF;
	vertical-align: baseline;
	white-space: nowrap;
  	@include border-radius(5px);
  	/*@include text-shadow(0px -1px 1px #666);*/
  	cursor: pointer;
  	font-family: 'Rambla', sans-serif;
  	margin: 0.25em;
  	padding: 0.5em 1em;
  	text-decoration: none;
    border-style: solid;
    border-width: 1px;


	/*COLOR STYLES*/
	&.white{
		@include button(#FFF, #DDD);
	}

	&.yellow{
		@include button(#FFF035, #FFC850);
	}

	&.blue{
		@include button(#2A77C3, #205A94);
	}

	&.green{
		@include button(#91D89F, #0BB993);
	}
	
	&.lightblue{
		@include button(#00B2CD, #0092A9);
	}

	&.red{
		@include button(#F4343E, #CD3030);
	}

	&.orange{
		@include button(#FFC156, #FF9600);
	}

	&.violet{
		@include button(#804068, #0A0430);
	}

	&.magenta{
		@include button(#FF9AEC, #FF4BE4);
	}

	&.brown{
		@include button(#C4351C, #94200C);
	}

	&.darkgreen{
		@include button(#398E1F, #2B6B17);
	}

	/*Sizes Styles*/
	&.big{
		font-size: 1.3em
	}

	&.small{
		font-size: 0.8em
	}


	/*oTHERS*/
  	&:active{
  		position: fixed;
  		top: 1px;
  	}
	
}