If you haven’t checked out “Less” or “SASS”  or “Sylus”, today is a great day !!!

Today I want to give you a some tips so you have some nice decent buttons, without getting back to PHOTOSHOP. Using some css3 and because I like LESS i want to explain why i love it and use it on almost every project.

So Less what ?? Less Power ??

Well, it ins’t less power.

LESS is a dynamic stylesheet lenguage.

So, LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. But how do i enable this “LESS” you talk about ??

OK, You sold me the idea of LESS!!

Now you are interested in, huh!

So, direct your favorite browser to http://lesscss.org then you will see  a “download” link. Now Save that file into your project folder and create an index.html file in there too.

Open up your index.html and add your basic mark up or use the one i use:

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
</head>
<body>

</body>
</html>

PD: This is for html5.

Now you have your basic mark-up go to the <head> section and add the less.js file and a styles.less file we will be creating later:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

If you didn’t knew in html5 you can omit the type and you could do something like this:

<link rel="stylesheet/less" href="styles.less">
<script src="less.js"></script>

Now as I said let’s create our style.less so creat it on your project folder and let’s add some code don’t worry if it looks a little bit strange i will explain it all:

@base-color: red; //Using variables(this color is an arbitrary selection)

body {
  background: @base-color;
}

Ok, so here is a concept you probably never see on CSS. Variables.

Wtf ?? Variables in CSS!!

That’s correct, with less you can create variables, and even better operate them !!

You define a variable using the “@” symbol

Here are some self explanatory examples:

@nice-color: red;
@nice-lighter-color @nice-color + #111

body {
  background: nice-lighter-color;
}

And this is like putting this on your css:

body{
  background: red + #111;
}

Are we going to make something  real??

Of course we will , so let’s go and meake something real.

So, go onto your index.html and add a new anchor tag, directing to no where, with the class “cool” like this:

<a href="#" class="cool">Submit</a>

Now open up your styles.less again and add that class:

.cool{
}

Now create a basic color variable like this:

@basic-color: #ff0000;

Now let’s have some fun and add this piece of code (it has an explanation next to each line):

.cool{
  background: @basic-color;
  display: block; // Set it so it isn't a line all over the screen
  width: 400px;// Set it so it have a fixed size
  height: 100px;// Like in the above set a fixed size
  margin: 50px auto;//Put it to the center (just for the tut)

  font-family: helvetica,arial;//Set a good looking font
  font-weight: bold;//A good looking font
  font-size: 100px;//Set a big size for demostration
  line-height: 100px;//This trick centers vetically the text
  text-align: center;//Center horizontally the text
  text-decoration: none;//Temove the Underline
  text-shadow: 0px 2px 0px (@basic-color + #555);// This is a trick so the text look like it is typepressed :D 

  color: #333;// Set the text some grayish color
}

And if you see your index.html on a browser you will see something like this:

Result: it changes depending on the basic-color, this is a purple basic color.

Now it is preety, but we will add some more styling. Using the mixins in LESS. This will help us so we don’t have to write the vendor prefix of a lot of properties.

Mixins

Mixins are a bunch of properties from one ruleset into another ruleset. This is useful when we do something like this:

.aclass{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Instead we can create a mixin. Like this :

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.aclass{
  .border-radius(10px);
}

Now you understand what mixins are we can use a stylesheet Jeffrey Way shared at Snippler:

Dont type more vendor prefix with less: http://snipplr.com/view/47181/less-classes/

So copy this snippet into your syles.less or just copy the mixins you think you will use.

Now let’s continue with our button.

On the class “cool” now you have those mixins go and add a little bit of more syling:

.cool {
	display: block;
	width: 400px;
	height: 100px;
	margin: 50px auto;

	font-family: helvetica,arial;
	font-weight: bold;
	font-size: 100px;
	line-height: 100px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 2px 0px (@basic-color + #555);

	color: #333;

	.border-radius(10px);
	/*-webkit-border-radius: 10px;
	-moz-border-radius: 10px;*/

	.linear-gradient(@basic-color, (@basic-color * .75));
	/*background: @basic-color;
	background: -webkit-gradient(linear, left top, left bottom, from(@basic-color), to(@basic-color * 0.75));
	background: -moz-linear-gradient(@basic-color, (@basic-color * .75));*/

	.box-shadow(2px,2px,15px, 0, #333);
	/*-webkit-box-shadow: 2px 2px 15px #333;
	-moz-box-shadow: 2px 2px 15px #333;
	box-shadow: 2px 2px 15px #333;*/

	border: 1px solid (@basic-color + #666);

	cursor: pointer;
}

Now you will have something like this:

A nice Pure CSS3 button, customizable with LESS.

Now you can customize your button just by changing the @basic-color variable.

Conclusion

I would like you leave a comment, if this helped you or if you like it. If you have any question, suggestion or review, I would like to read it.

Result

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>CSS3 LESS BUTTON</title>
	<style type="text/less">
		body {
			background: #666;
		}

		@basic-color: #aa33aa;

		.cool {
			background: @basic-color;
			display: block;
			width: 400px;
			height: 100px;
			margin: 50px auto;

			font-family: helvetica,arial;
			font-weight: bold;
			font-size: 100px;
			line-height: 100px;
			text-align: center;
			text-decoration: none;
			text-shadow: 0px 2px 0px (@basic-color + #555);

			color: #333;

			.border-radius(10px);
			/*-webkit-border-radius: 10px;
			-moz-border-radius: 10px;*/

			.linear-gradient(@basic-color, (@basic-color * .75));
			/*background: @basic-color;
			background: -webkit-gradient(linear, left top, left bottom, from(@basic-color), to(@basic-color * 0.75));
			background: -moz-linear-gradient(@basic-color, (@basic-color * .75));*/

			.box-shadow(2px,2px,15px, 0, #333);
			/*-webkit-box-shadow: 2px 2px 15px #333;
			-moz-box-shadow: 2px 2px 15px #333;
			box-shadow: 2px 2px 15px #333;*/

			border: 1px solid (@basic-color + #666);

			cursor: pointer;
		}

		.cool:hover{
			color: #111;
		}

		.cool:active{
			.box-shadow(0px, 2px, 6px, 0, black);
		}

		.border-radius( @radius: 3px ) {
			-webkit-border-radius: @radius;
			   -moz-border-radius: @radius;
			        border-radius: @radius;
		}

		.box-shadow(
			@x : 2px,
			@y : 2px,
			@blur : 5px,
			@spread : 0,
			@color : rgba(0,0,0,.6)
		) {
			-webkit-box-shadow: @x @y @blur @spread @color;
			   -moz-box-shadow: @x @y @blur @spread @color;
					box-shadow: @x @y @blur @spread @color;
		}
		.linear-gradient(
			@begin: black,
			@end: white,
			@switch : 100%
		) {
			background:  @begin;
		    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
			background: -moz-linear-gradient(top, @begin, @end @switch);
			background: -o-linear-gradient(top, @begin, @end @switch);
			background: linear-gradient(top, @begin, @end @switch);
		}

	</style>

	<script src="less.js"></script>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<a class="cool" href="#">Submit</a>
</body>
</html>
Link to this post!