<section>
  <button>ボタン</button>
</section>
:root {
  --k-primary: 204 70% 53%;
  --k-primary-accent: 204 70% 38%;
  --k-primary-foreground: 0 0 100%;
  --k-border: 192 10% 90%;
}
button {
  border: 1px solid hsl(var(--k-border));
  background-color: hsl(var(--k-primary));
  color: hsl(var(--k-primary-foreground));
  
  min-width: 163px;
  padding: 0 1em;
  line-height: 3;
  
  cursor: pointer;
  outline: none;
  
  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
  }
}





















section {
  min-height: 100vh;
  padding: 1em;
  display: grid;
  place-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.