Press "Enter" to skip to content

Creating Keyboard Shortcuts Buttons With Style | Keyboard.css

CSS Keyboard is a library of ready-to-use, browser-compatible keyboards as a UI button for use in your web projects. This CSS library helps you create keyboard-like buttons to point out your keyboard shortcuts in a practical manner.

custom keyboard shortcuts, customize keyboard shortcuts, how to change keyboard shortcuts, shortcut key for spacebar in keyboard

Cyberpunk 2077 Style Glitch Transition Button In Pure CSS

How to make use of it:

1. Install the package with NPM.

# NPM
$ npm i keyboard-css --save

2. Import the Keyboard.css into your challenge.

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

3. To create a keyboard button, simply add the CSS class β€˜KBC-button’ to the goal component and executed it.

<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 next 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 additionally gives 4 button states:

<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 types 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 within 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

Create Keyboard Style Buttons With Keyboard, Keyboard CSS Plugin/Github

Keyboard CSS Demo


See Demo And Download

Official Website(shhdharmen): Click Here

This superior jQuery/javascript plugin is developed by shhdharmen. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *