NibCSS

1 · Your first button

Lesson 1 of 8 — shorthands, values, hover states and the anatomy of a nib attribute.

2 min readv1

In this lesson you build a production-quality button from scratch and learn the three ideas everything else rests on: rules, shorthands and modifiers.

You will learn: how an attribute is structured · the most common shorthands · how hover: works · how to make an accessible focus state.

Before you start: any of the Quick start setups. The CDN one is enough.

Step 1 — plain CSS, shorter#

Start with a bare button and add a background, text colour and padding:

HTML
<button nib="bgc=#4F52D9; cl=#fff; p=10px 18px">Save changes</button>

Three rules, separated by ;. Each is name=value, and each becomes one CSS declaration:

You write

CSS

bgc=#4F52D9

background-color: #4F52D9

cl=#fff

color: #fff

p=10px 18px

padding: 10px 18px

The value is any valid CSS value — #4F52D9, rgb(79 70 229), var(--brand), calc(1rem + 2px). There is no scale to learn; if CSS accepts it, NibCSS accepts it.

Step 2 — shape and typography#

HTML
<button nib="bgc=#4F52D9; cl=#fff; p=10px 18px; bd=none; bdrd=10px; ftw=600; fts=15px; cur=pointer">Save changes</button>
  • bd=none — border: none (browsers draw a default border on buttons)
  • bdrd=10px — border-radius
  • ftw=600, fts=15px — font-weight, font-size
  • cur=pointer — cursor

Shorthands follow a pattern: the first letters of each word (bdrd = border-radius, ftw = font-weight). You will know the common ones within an hour, and the full reference is always one click away.

Step 3 — interaction states#

A modifier before the name scopes a rule to a state. hover:bgc=#3A3DBF only applies on hover:

HTML
<button nib="bgc=#4F52D9; cl=#fff; p=10px 18px; bd=none; bdrd=10px; ftw=600; fts=15px; cur=pointer;
             ts=background-color .15s, transform .15s;
             hover:bgc=#3A3DBF; hover:tf=translateY(-1px); active:tf=translateY(0)">Save changes</button>
  • ts=… — transition, so the change animates
  • hover:tf=translateY(-1px) — a subtle lift on hover
  • active:tf=translateY(0) — pressed state

Step 4 — keyboard focus (do not skip this)#

Removing the browser's focus ring without replacing it makes your UI unusable from a keyboard. focus-visible: shows a ring only when the user navigates with the keyboard:

HTML
<button nib="bgc=#4F52D9; cl=#fff; p=10px 18px; bd=none; bdrd=10px; ftw=600; fts=15px; cur=pointer;
             ts=background-color .15s; hover:bgc=#3A3DBF;
             focus-visible:otl=3px solid #A8ABF4; focus-visible:otlo=2px;
             disabled:opc=.5; disabled:cur=not-allowed">Save changes</button>

What you built#

One attribute describes the button completely: shape, colours, typography, motion, hover, press, keyboard focus and the disabled state. Nothing lives in a separate stylesheet.

Exercise#

Make a secondary button: transparent background, a 1px border in #D0D2FB, indigo text, and a light indigo background on hover. Solution:

HTML
<button nib="bgc=transparent; cl=#3A3DBF; p=10px 18px; bd=1px solid #D0D2FB; bdrd=10px; ftw=600; cur=pointer;
             ts=background-color .15s; hover:bgc=#EEEFFE">Cancel</button>

Next steps#