holakit/assets/css/components/button.css

Yet another design-driven UI component set.

/*

Buttons

Buttons are one of the most used components. It's the very basic way that users can
interact with an application. Currently HolaKit provides 3 kinds of button: Normal
buttons, primary buttons and Ghost buttons.

* **Normal Buttons**: For general purpose.
* **Primary Buttons**: For primary operations. Normally in a row of buttons, you have
  at least one primary buttons, for the most frequent usage.
* **Ghost Buttons**: For banner and heroes. It's kind of call-to-action.

All buttons classes can be apply to form submits (`<input type="submit">`), HTML buttons
(`<button>`) and links (`<a>`). In many cases you can also use just a bare `a.hola-button`,
for links in a row with other buttons to be properly aligned.

Markup: button.html

Styleguide Components - Buttons

*/

.hola-button {
  display: inline-block;
  text-decoration: none;
  padding: 0.5em 1em;
  margin: 0.15em 0;
  font-size: 1em;
  line-height: 1.5;
  border: none;
  outline: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: 0 0 0 0 #fff inset;
  cursor: pointer;
  transition: 0.3s box-shadow ease;
  border-radius: 0;
}
.hola-button:hover,
.hola-button:active {
  box-shadow: 0 0 0 1.5em rgba(255, 255, 255, 0.5) inset;
}

.hola-button.hola-button-normal {
  background: #eee;
  color: var(--hola-text-dark-color);
}

.hola-button.hola-button-primary {
  background: var(--hola-primary-color);
  color: var(--hola-text-light-color);
}

.hola-button.hola-button-ghost {
  box-shadow: 0 0 0 .2em var(--hola-primary-color) inset;
  font-weight: bold;
  color: var(--hola-primary-color);
}
.hola-hero.hola-hero-dark-bg .hola-button.hola-button-ghost {
  font-size: 1rem;
  color: var(--hola-text-light-color);
  box-shadow: 0 0 0 .2em var(--hola-text-light-color) inset;
}
/* TODO: Hover/active effect for ghost buttons */