ボタンのサンプル

シンプルな kintone 風ボタン

定義するスタイルを最小限に抑えたシンプルな kintone 風ボタンのサンプルです。

<button>ボタン</button>

: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));
  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
  }

  min-width: 163px;
  padding: 0 1em;
  line-height: 3;

  cursor: pointer;
  outline: none;
}

影と角丸を追加したリッチなボタン

影と角丸を追加したリッチなボタンのサンプルです。

また、transition プロパティを使用して、ボタンのホバー時のアニメーションを追加しています。

<button>ボタン</button>

: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: 0;
  background-color: hsl(var(--k-primary));
  color: hsl(var(--k-primary-foreground));

  transition: all 250ms ease;
  min-width: 163px;
  padding: 0 1em;
  line-height: 3;

  cursor: pointer;
  outline: none;

  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}