SMHcoders / keycap buttons

00 / Interface kit

Buttons with real travel.

Sculpted keycaps in the SMHcoders palette. They lift when you hover, follow the light from your pointer, and press down with a spring-back on release. Plain HTML and CSS, plus 3 kB (gzipped) of optional JavaScript.

Try the playground

pressed 0× · hold it down, the key stays down

01 / Colours

Five caps, one palette.

Teal

Primary action.

kc

Orange

Accent, the esc key.

kc--orange

Ink

Strong neutral.

kc--ink

Paper

Secondary, quiet.

kc--paper

Brand

Teal → orange, hero only.

kc--brand
02 / Sizes & shapes

From a tag to a hero.

kc--sm · 38px
kc · 52px
kc--lg · 66px
kc--xl · 84px
kc--icon · square keys
kc--pill
kc--socket · in a case
kc--block · rocks less across its length, like a stabilised spacebar
03 / States

Every state feels different.

RestFull key height, soft shadow.
HoverLifts 2px, glows, a sweep of light, specular follows the pointer, cap tilts towards it.
Pressed60ms travel to the bottom. Extrusion collapses, face dishes in, ripple from the press point. Springs back with overshoot.
LatchedToggles rest half-way down with the LED lit. data-kc-toggle
LoadingClick it: half travel, spinner, aria-busy. KC.loading(el)
DisabledFlat, greyed, no travel.
04 / Playground

Tune it, then copy it.

Colour
Size
Shape
Effects 

      
    

  


  

    

      
05 / On night
Dark sections, same keys.

      

        
        
        
        
      

    

  


  

    
06 / Use it
Two files, no build step.

    
    
      
  1. Include them.
    <link rel="stylesheet" href="kc.css">
<script src="kc.js" defer></script>
    2. 
      
  2. Write a button. The script builds the cap, face and icon for you.
    <button class="kc kc--orange" data-kc-icon="→">Click here</button>
<a class="kc kc--paper" href="/contact">Contact</a>
<button class="kc kc--ink" data-kc-toggle>Live data</button>
    3. 
      
  3. Tune it. Every size is a custom property.
    .my-cta { --h: 60px; --depth: 10px; --r: 16px; --px: 32px; }
KC.set({ sound: true, tilt: true, maxTilt: 7 });
    4. 
    

    

      kc.css
      kc.js
      The full keyboard