ButterStick

ButterStick.kbd.json

[
  {
    "name": "ButterStick"
  },
  [
    {
      "c": "#fafafa"
    },
    "1\n\n\n\n\n\n\n\n\nQ",
    "2\n\n\n\n\n\n\n\n\nW",
    "3\n\n\n\n\n\n\n\n\nE",
    "4\n\n\n\n\n\n\n\n\nR",
    "5\n\n\n\n\n\n\n\n\nT",
    "6\n\n\n\n\n\n\n\n\nY",
    "7\n\n\n\n\n\n\n\n\nU",
    "8\n\n\n\n\n\n\n\n\nI",
    "9\n\n\n\n\n\n\n\n\nO",
    "0\n\n\n\n\n\n\n\n\nP"
  ],
  [
    {
      "a": 5
    },
    "A\n\n\n\n\n\nZ",
    "S\n\n\n\n\n\nX",
    "D\n\n\n\n\n\nC",
    "F\n\n\n\n\n\nV",
    "G\n\n\n\n\n\nB",
    "H\n\n\n\n\n\nN",
    "J\n\n\n\n\n\nM",
    "K\n\n\n\n\n\n<",
    "L\n\n\n\n\n\n>",
    ";\n\n\n\n\n\n?"
  ],
  [
    {
      "y": 1,
      "a": 4
    },
    "\n\nESC",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\nLMOUSE",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\nRMOUSE",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\nMeta",
    "\n\nALTER",
    "\n\nCTRL",
    {
      "a": 7
    },
    ""
  ],
  [
    {
      "a": 4
    },
    "\n\n\nSHIFT\n\n\n\nCTRL",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\n\nNUMBER",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\n\nSPACE",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\n\nNumber",
    {
      "a": 7
    },
    "",
    {
      "a": 4
    },
    "\n\n\nSHIFT\n\n\n\nENTER",
    {
      "a": 5
    },
    "SYM"
  ],
  [
    {
      "y": 1,
      "a": 7
    },
    "!",
    "@",
    "{",
    "}",
    "|",
    "+",
    "-",
    "/",
    "*",
    ";"
  ],
  [
    "%",
    {
      "a": 5
    },
    "$\n\n\n\n\n\n^",
    "(\n\n\n\n\n\n[",
    ")\n\n\n\n\n\n]",
    "`\n\n\n\n\n\n~",
    "#\n\n\n\n\n\n&",
    {
      "a": 7
    },
    "=",
    ",",
    ".",
    ""
  ]
]

ButterStick.style.css

.keylabel1 { 
    transform: translateY(-11px) rotate(0deg); 
    z-index:1;
}

.keylabel8 { 
    transform: translateX(22px) translateY(5px) rotate(0deg); 
    z-index:1;
}

.keylabel5 { 
    transform: translateX(25px) translateY(-30px) rotate(90deg);
    background: #0000ff30;
    border-radius: 30px;
    z-index:1;
}

.keylabel2 { 
    transform: translateX(25px) translateY(2px) rotate(0deg); 
    z-index:1;
}

.keyborder {
    border-color: #CCCCCC;
}

#keyboard #keyboard-bg {
    background-color: red;
}