Hello Button!

While the majority of CSS toolkits use buttons to show off their styles, we will show you how to build them from scratch.

Let's start our button with sizing. First we will give it a vertical padding.

HTML
<button class="py--1">Hello Button!</button>
Preview

We could give it some horizontal padding, but it's ok for now. Next, let's colour up!

HTML
<button class="py--1 bgc--bl1">Hello Button!</button>
Preview

We need to remove the border width.

HTML
<button class="py--1 bgc--bl1 brw--0">Hello Button!</button>
Preview

A bit of rounded corners would be nice:

HTML
<button class="py--1 bgc--bl1 brw--0 brrad--3">Hello Button!</button>
Preview

Let's change the background colour on hover:

HTML
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1">Hello Button!</button>
Preview

Adding a cursor pointer:

HTML
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr">Hello Button!</button>
Preview

A bigger font size and line height:

HTML
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4">Hello Button!</button>
Preview

And finally, the horizontal padding now. Our button is done!

HTML
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
Preview

More? Check out how easy is to change colour, shape and size without overwriting CSS.

HTML
<button class="py--1 bgc--rd1 c--wh1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
<button class="py--1 bgc--bk1 c--wh1 brw--0 brrad--6 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
<button class="brw--1 brrad--3 bgchvr--yl1 cur--ptr fts--2 lnh--2">Hello Button!</button>
Preview