Create Keyboard Style Buttons With Keyboard.css

Preview:

Description:

Keyboard.css is a CSS library that helps you create keyboard-like buttons to show off your keyboard shortcuts in a realistic way.

Works with kbd, a, and button elements.

How to use it:

1. Install the package with NPM.

# NPM
$ npm i keyboard-css --save

2. Import the Keyboard.css into your project.

<link rel="stylesheet" href="/dist/css/main.min.css" />

3. To create a keyboard button, simply add the CSS class ‘kbc-button’ to the target element and done.

<kbd class="kbc-button">Ctrl</kbd>
<button class="kbc-button">Ctrl</button>
<a class="kbc-button">Ctrl</a>

4. Remove the surface border from your buttons.

<kbd class="kbc-button no-container">Ctrl</kbd>
<button class="kbc-button no-container">Ctrl</button>
<a class="kbc-button no-container">Ctrl</a>

5. Specify the button size with the following CSS classes:

<button class="kbc-button kbc-button-xxs">XXS</button>
<button class="kbc-button kbc-button-xs">XS</button>
<button class="kbc-button kbc-button-sm">SM</button>
<button class="kbc-button">MD</button>
<button class="kbc-button kbc-button-lg">LG</button>

6. The library also provides 4 button states:

• hover
• focus
• active
• disabled

<button class="kbc-button hover">Hovered</button>
<button class="kbc-button focus">Focused</button>
<button class="kbc-button active">Activated</button>
<button class="kbc-button disabled">Disabled</button>

7. Apply pre-defined styles to the buttons:

<kbd class="kbc-button kbc-button-primary">Primary</kbd>
<kbd class="kbc-button kbc-button-secondary">Secondary</kbd>
<kbd class="kbc-button kbc-button-success">Success</kbd>
<kbd class="kbc-button kbc-button-danger">Danger</kbd>
<kbd class="kbc-button kbc-button-info">Info</kbd>
<kbd class="kbc-button kbc-button-light">Light</kbd>
<kbd class="kbc-button kbc-button-dark">Dark</kbd>

8. Customize the buttons by overriding the default variables in the _variables.scss

// Colors
$kbc-white: #fff !default;
$kbc-gray-100: #f8f9fa !default;
$kbc-gray-200: #e9ecef !default;
$kbc-gray-300: #dee2e6 !default;
$kbc-gray-400: #ced4da !default;
$kbc-gray-500: #adb5bd !default;
$kbc-gray-600: #6c757d !default;
$kbc-gray-700: #495057 !default;
$kbc-gray-800: #343a40 !default;
$kbc-gray-900: #212529 !default;
$kbc-black: #000 !default;
$kbc-grays: () !default;
// stylelint-disable
$kbc-grays: map-merge(
  (
    '100': $kbc-gray-100,
    '200': $kbc-gray-200,
    '300': $kbc-gray-300,
    '400': $kbc-gray-400,
    '500': $kbc-gray-500,
    '600': $kbc-gray-600,
    '700': $kbc-gray-700,
    '800': $kbc-gray-800,
    '900': $kbc-gray-900,
  ),
  $kbc-grays
);
// stylelint-enable
$kbc-light: $kbc-gray-100 !default;
$kbc-dark: $kbc-gray-800 !default;
$kbc-blue: #007bff !default;
$kbc-indigo: #6610f2 !default;
$kbc-purple: #6f42c1 !default;
$kbc-pink: #e83e8c !default;
$kbc-red: #dc3545 !default;
$kbc-orange: #fd7e14 !default;
$kbc-yellow: #ffc107 !default;
$kbc-green: #28a745 !default;
$kbc-teal: #20c997 !default;
$kbc-cyan: #17a2b8 !default;
$kbc-colors: () !default;
// stylelint-disable
$kbc-colors: map-merge(
  (
    'blue': $kbc-blue,
    'indigo': $kbc-indigo,
    'purple': $kbc-purple,
    'pink': $kbc-pink,
    'red': $kbc-red,
    'orange': $kbc-orange,
    'yellow': $kbc-yellow,
    'green': $kbc-green,
    'teal': $kbc-teal,
    'cyan': $kbc-cyan,
    'white': $kbc-white,
    'gray': $kbc-gray-600,
    'gray-dark': $kbc-gray-800,
  ),
  $kbc-colors
);
// stylelint-enable
$kbc-primary: $kbc-blue !default;
$kbc-secondary: $kbc-gray-600 !default;
$kbc-success: $kbc-green !default;
$kbc-info: $kbc-cyan !default;
$kbc-warning: $kbc-yellow !default;
$kbc-danger: $kbc-red !default;
$kbc-light: $kbc-gray-100 !default;
$kbc-dark: $kbc-gray-800 !default;
$kbc-theme-colors: () !default;
// stylelint-disable
$kbc-theme-colors: map-merge(
  (
    'primary': $kbc-primary,
    'secondary': $kbc-secondary,
    'success': $kbc-success,
    'info': $kbc-info,
    'warning': $kbc-warning,
    'danger': $kbc-danger,
    'light': $kbc-light,
    'dark': $kbc-dark,
  ),
  $kbc-theme-colors
);
// stylelint-enable
// Set a specific jump point for requesting color jumps
$kbc-theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$kbc-yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$kbc-yiq-text-dark: $kbc-gray-900 !default;
$kbc-yiq-text-light: $kbc-white !default;
// Components
//
// Define common padding and border radius sizes and more.
$kbc-line-height-base: 1.5 !default;
$kbc-line-height-lg: $kbc-line-height-base !default;
$kbc-line-height-sm: $kbc-line-height-base !default;
$kbc-line-height-xs: $kbc-line-height-base !default;
$kbc-line-height-xxs: $kbc-line-height-base !default;
$kbc-border-width: 1px !default;
$kbc-bg-color: $kbc-white !default;
$kbc-border-color: adjust-color($kbc-bg-color, $lightness: -10%) !default;
$kbc-shadow-color: adjust-color($kbc-bg-color, $lightness: -30%) !default;
$kbc-font-color: color-yiq($kbc-bg-color) !default;
$kbc-border-radius: 0.25rem !default;
$kbc-border-radius-lg: 0.3rem !default;
$kbc-border-radius-sm: 0.2rem !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$kbc-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI',
  Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$kbc-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
  'Liberation Mono', 'Courier New', monospace !default;
$kbc-font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$kbc-font-size-lg: $kbc-font-size-base * 1.25 !default;
$kbc-font-size-sm: $kbc-font-size-base * 0.875 !default;
$kbc-font-size-xs: $kbc-font-size-base * 0.725 !default;
$kbc-font-size-xxs: $kbc-font-size-base * 0.7 !default;
$kbc-btn-depth-xxs: 2 !default;
$kbc-btn-depth-xs: 2 !default;
$kbc-btn-depth-sm: 3 !default;
$kbc-btn-depth: 5 !default;
$kbc-btn-depth-lg: 8 !default;
$kbc-font-weight-lighter: lighter !default;
$kbc-font-weight-light: 300 !default;
$kbc-font-weight-normal: 400 !default;
$kbc-font-weight-bold: 700 !default;
$kbc-font-weight-bolder: bolder !default;
$kbc-font-weight-base: $kbc-font-weight-normal !default;
$kbc-small-font-size: 80% !default;
// Buttons
$kbc-btn-border-width: $kbc-border-width !default;
$kbc-btn-border-color: $kbc-border-color !default;
$kbc-btn-disabled-opacity: 0.65 !default;
$kbc-btn-line-height: $kbc-line-height-base !default;
$kbc-btn-font-size: $kbc-font-size-base !default;
$kbc-btn-font-weight: $kbc-font-weight-base !default;
$kbc-btn-font-family: $kbc-font-family-sans-serif !default;
$kbc-btn-border-radius: $kbc-border-radius !default;
$kbc-btn-bg-color: $kbc-bg-color !default;
$kbc-btn-font-color: $kbc-font-color !default;
$kbc-btn-shadow-color: $kbc-shadow-color !default;
$kbc-btn-after-border-color: $kbc-shadow-color !default;
$kbc-btn-cursor: pointer !default;
$kbc-btn-text-align: left !default;
$kbc-btn-icon-right: 0.5rem !default;
$kbc-btn-icon-top: 0.5rem !default;
// stylelint-disable
$kbc-btn-hover-bg-color: adjust-color(
  $kbc-btn-bg-color,
  $lightness: -10%
) !default;
// stylelint-enable
$kbc-btn-focus-bg-color: $kbc-btn-hover-bg-color !default;
$kbc-btn-active-bg-color: $kbc-btn-hover-bg-color !default;
$kbc-btn-active-box-shadow: 0 0 1px 1px #c7c7c7 !default;
// KBD stuff
$kbc-kbd-font-size-base: inherit !default;
$kbc-kbd-line-height-base: inherit !default;
$kbc-kbd-depth: 3 !default;
$kbc-kbd-border-radius: $kbc-btn-border-radius !default;
$kbc-kbd-font-family: $kbc-font-family-monospace !default;
// KBD size
$kbc-kbd-size-base: () !default;
// stylelint-disable
$kbc-kbd-size-base: map-merge(
  (
    'padding-y': 0.1rem,
    'padding-x': 0.4rem,
    'font-size': $kbc-kbd-font-size-base,
    'line-height': $kbc-kbd-line-height-base,
    'depth': $kbc-kbd-depth,
    'after-border-width': 0.125rem,
    'after-adjust-x': -0.0625rem,
    'after-adjust-y': -6,
    'after-border-radius': $kbc-kbd-border-radius + 0.25rem,
  ),
  $kbc-kbd-size-base
);
// stylelint-enable
// Button sizing
$kbc-btn-size-base: () !default;
// stylelint-disable
$kbc-btn-size-base: map-merge(
  (
    'padding-y': 0.375rem,
    'padding-x': 0.75rem,
    'font-size': $kbc-font-size-base,
    'line-height': $kbc-line-height-base,
    'depth': $kbc-btn-depth,
    'after-border-width': 0.125rem,
    'after-adjust-x': -0.0625rem,
    'after-adjust-y': -5,
    'after-border-radius': $kbc-btn-border-radius + 0.25rem,
  ),
  $kbc-btn-size-base
);
// stylelint-enable
// stylelint-disable
$kbc-btn-size-map: () !default;
$kbc-btn-size-map: map-merge(
  (
    'xxs': (
      'padding-y': 0.1rem,
      'padding-x': 0.3rem,
      'font-size': $kbc-font-size-xxs,
      'line-height': $kbc-line-height-xxs,
      'depth': $kbc-btn-depth-xxs,
      'after-border-width': 0.0625rem,
      'after-adjust-x': -0.125rem,
      'after-adjust-y': -4,
      'after-border-radius': $kbc-btn-border-radius + 0.125rem,
    ),
    'xs': (
      'padding-y': 0.175rem,
      'padding-x': 0.5rem,
      'font-size': $kbc-font-size-xs,
      'line-height': $kbc-line-height-xs,
      'depth': $kbc-btn-depth-xs,
      'after-border-width': 0.0625rem,
      'after-adjust-x': -0.125rem,
      'after-adjust-y': -4,
      'after-border-radius': $kbc-btn-border-radius + 0.125rem,
    ),
    'sm': (
      'padding-y': 0.25rem,
      'padding-x': 0.5rem,
      'font-size': $kbc-font-size-sm,
      'line-height': $kbc-line-height-sm,
      'depth': $kbc-btn-depth-sm,
      'after-border-width': 0.09375rem,
      'after-adjust-x': -0.0625rem,
      'after-adjust-y': -4,
      'after-border-radius': $kbc-btn-border-radius + 0.125rem,
    ),
    'lg': (
      'padding-y': 0.5rem,
      'padding-x': 1rem,
      'font-size': $kbc-font-size-lg,
      'line-height': $kbc-line-height-lg,
      'depth': $kbc-btn-depth-lg,
      'after-border-width': 0.125rem,
      'after-adjust-x': -0.125rem,
      'after-adjust-y': -5,
      'after-border-radius': $kbc-btn-border-radius + 0.25rem,
    ),
  ),
  $kbc-btn-size-map
);
// stylelint-enable