1. Web Design
  2. UI Design

How to Make Your Own Button UI Kit with Super-Clean Syntax


Every designer loves buttons. It’s a fact made known by the appreciation of projects such as Unicorn UI (which at the time of this writing only supports buttons and has almost 4,000 Stargazers on GitHub).

But no designer fits in a box. We all have our own wants and needs out of a button framework. We all want to see certain types of buttons, and maybe we’ve become really good at designing a certain type of button. So why don’t we make our own button UI kit from scratch?

The simple, yet very effective base for our button UI framework


First, we need to identify which elements our buttons will be able to target. In our case, let’s make sure that any anchor, input, or button tag can be styled via our UI kit. To do this, let’s create some markup:

A Note About the “UI” Attribute

I’m using an attribute to do this simply because I think it looks better. It might not be terribly future-proof (what if the W3C introduces a new spec for ui attributes?) but if you’re worried about this you can namespace ui as something like cory-ui in which case I’d wager you’re safe from new W3C introductions. If you’re really, really, worried about it, or are crazy about performance you can use classes and accomplish the same effect, but you might run into issues with classes overriding each other at certain points.

Base Styles

We’ll be using the Stylus CSS preprocessor to avoid having to write out a million curly braces and so our code looks neat and clean without repetition. Even if you’re unfamiliar with Stylus you should be able to follow along using another preprocessor or vanilla CSS.

First, let’s set some default styles to the [ui*="button"] selector. We’re using the star selector within this context so you can add “button” anywhere in your attribute and it will work.

Adding Attributes

Now the fun part. Let’s start adding whatever attributes we think we might use. For instance, I know I want the ability to have buttons of various sizes, so I’ll add in sizes to my buttons:

Notice how we’re appending the attributes onto our button attribute selector? This means those attributes won’t work for elements that don’t have ui="button". This is a nice way to keep our changes scoped to various attributes we might want to add.

More Detailed Styles

Let’s keep going and add some rounding to our buttons:

Buttons some with rounding
The smallest button has rounded corners, the second has become a “pill”


By now you should be getting more familiar with this concept. Let’s add some colors in the form of variables:

That’s the gist of it! Add as many rules and properties as you want. You can even add complex themes to your buttons, interesting hover states and animations. Share your button UI framework with us in the comments!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.