<style>
body{
  font-family:sans-serif;
  color:#333;
  }
  pre{background:#eee;padding:10px}
</style>
<h2>less mixin for ghost button with less Hat</h2>

<div>
  <a href="#" class="ghost-btn">link says boo</a>
  <button class="ghost-btn">button says boo</button>
  <a href="http://html5-ninja.com" target="_blank" class="ghost-btn">Visit HTML5 Ninja</a>
</div>
<h3>Syntax</h3>
<p>Default value:</p>
<ul>
  <li>@color1:#3f6fa0</li>
  <li>@color2:#fff</li>
  <li>@height:36px</li>
  <li>@fontSize:1em</li>
  <li>@radius:5px</li>
  <li>@fontFamily:"Arial"</li>
  <li>@borderWidth:1px</li>
</ul>
<pre>.ghostMixin(@color1,@color2,@height,@fontSize,@radius,@fontFamily,@borderWidth)</pre>
<h3>Example:</h3>
<pre>
.ghost-btn{
  .ghostMixin();
}
</pre>
<h3>Or simply copy the compiled CSS below:</h3>
<pre>
.ghost-btn {
  font-family: "Arial";
  display: inline-block;
  text-decoration: none;
  border: 1px solid #3f6fa0;
  height: 36px;
  line-height: 36px;
  color: #3f6fa0;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  font-size: 1em;
  padding: .5em 1.5em;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background: #ffffff;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  zoom: 1;
  -webkit-backface-visibility: hidden;
  position: relative;
}
.ghost-btn:hover {
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  background-color: #3f6fa0;
  color: #ffffff;
}
.ghost-btn:focus {
  outline: none;
}

</pre>

@import "lesshat";

/*************************************
  Default value:

  @color1:#3f6fa0
  @color2:#fff
  @height:36px
  @fontSize:1em
  @radius:5px
  @fontFamily:"Arial"
  @borderWidth:1px
**************************************/
.ghostMixin(@color1:#3f6fa0,@color2:#fff,@height:36px,@fontSize:1em,@radius:5px,@fontFamily:"Arial",@borderWidth:1px){
  font-family:@fontFamily;
  display:inline-block;
  text-decoration:none;
  border:@borderWidth solid @color1;
  height:@height;
  line-height:@height;
  color:@color1;
  .border-radius(@radius);
  font-size:@fontSize;
  padding:.5em 1.5em;
  .transition(all 0.2 ease-out);
  background:@color2;
  .box-sizing(content-box);
  cursor:pointer;
  zoom:1;
  -webkit-backface-visibility: hidden;
  position:relative;
  &:hover{
    .transition(0.2 ease); 
    background-color:@color1;
    color:@color2;
  }
  &:focus{
    outline:none;
  }

}
/*************************************
  Example
**************************************/
.ghost-btn{
  .ghostMixin();
}