Button

HTML

---
const { customClasses, text, style } = Astro.props;
const defaultClasses = "button";
const classes = customClasses
  ? `${defaultClasses} ${customClasses}`
  : defaultClasses;

const buttonText = text ? text : "Learn More";
---

<a href="#" class={classes} style={style}><span>{buttonText}</span></a>

SCSS

.button {
  display: inline-flex;
  text-transform: uppercase;
  align-items: center;
  font-size: var(--s0);
  font-weight: 700;
  color: var(--btn-color, var(--white));
  padding: 14px 25px;
  line-height: 1;
  text-decoration: none;
  background-color: var(--btn-bg-color, var(--black));
}

.button.-hollow {
  --btn-bg-color: transparent;
  --btn-color: var(--black);

  box-shadow: 0 0 0 1px currentColor;
}