/**
 * Botones
 *
 * El botón `.btn` clase puede ser aplicado a `<button>`, `<input>`, o `<a>` elementos.
 *
 * @sección
 *
 * @ejemplo
 * <button class="btn">Button</button>
 * <input type="submit" class="btn" value="Input"/>
 * <a href="#" class="btn">Anchor</a>
 */
.btn {
  background-color: #ddd;
  border-radius: 4px;
  border: 2px solid transparent;
  color: black;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  padding: 5px 15px;
  text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active {
  background-color: #aaa;
  text-decoration: none;
  cursor: pointer;
}

.btn:disabled {
  opacity: 0.5;
}

/**
 * Botón Principal
 *
 * Un botón principal.
 *
 * @sección
 *
 * @ejemplo
 * <button class="btn primary">Button</button>
 * <input type="submit" class="btn primary" value="Input"/>
 * <a href="#" class="btn primary">Anchor</a>
 */
.btn.primary {
  background-color: #60b044;
  background-image: linear-gradient(#8add6d, #60b044);
  border-color: #5ca941;
  color: #fff;
}
.btn.primary:hover {
  background-color: #569e3d;
  background-image: linear-gradient(#79d858, #569e3d);
  border-color: #4a993e;
}

.btn.smaller {
  font-size: 10px;
  padding: 4px 10px;
}