/***
  title: Square buttons
  section: Buttons
  description: Very pretty square buttons
  example:
    Test...
    <p>
        <include id="simple" section="Buttons" />
    </p>

***/
.btn{
  display: inline-block;
  padding: .3em .6em;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background-color: darkslateblue;
}
.btn:hover{
  background-color: #38306E;
}
.btn-small{
  font-size: .8em;
}
.btn-medium{
  font-size: 1em;
}
.btn-large{
  font-size: 1.3em;
}


/***
  title: Override classnames
  section: Buttons
  id: addClassNames
  example:
    <a href="" class="btn btn-small {classNames}">button</a>
***/

/***
  title: Override classnames
  section: Buttons
  example:
    <include id="addClassNames" {classNames}="btn-yellow" />
***/

.btn-yellow{
  background-color: yellow;
}

/***
  title: Override random attributes
  section: Buttons
  id: templateVars
  example:
    <div class="{templateVars}">
      button {templateVars}
    </a>
***/

/***
  title: Override random attributes
  section: Buttons
  example:
    <include id="templateVars" {templateVars}="btn-yellow" />
***/

.btn-yellow{
  background-color: yellow;
}