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>We could give it some horizontal padding, but it's ok for now. Next, let's colour it up!
HTML<button class="py--1 bgc--bl1">Hello Button!</button>We need to remove the border width.
HTML<button class="py--1 bgc--bl1 brw--0">Hello Button!</button>A bit of rounded corners would be nice:
HTML<button class="py--1 bgc--bl1 brw--0 brrad--3">Hello Button!</button>Let's change the background colour on hover:
HTML<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1">Hello Button!</button>Adding a cursor pointer:
HTML<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr">Hello Button!</button>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>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>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>