How To Create A UI Button Kit Of Your Own

In the era when nothing seems to be able to impress us, we can be amazed by a simple… button. Buttons are everywhere; they are extremely popular among fashion-connoisseurs. Once, I found a button on eBay that cost $2 400 (not bad for a single button, huh?). In web design, buttons are as much important as in fashion. Maybe even more significant. Why? Buttons represent a call for action; so, they help website owners to make money. If you are a UI designer, you already know how significant buttons are. What you probably don’t know is that buttons can be also a designer’s signature. Want to have one? DesignContest will help you!

Free Button UI Kits

You certainly know at least several useful UI Kits you use from time to time. They are great because, as a rule, contain everything you need to create a user-friendly interface. However, most of them are far from being free of charge which decreases the opportunity to use a couple of such kits for different projects. Still, there are some kits that are free (and are really awesome as well).

Flat Buttons (CSS & PSD) on Behance

Marjan Petrovski offers a great set of buttons free for personal and commercial use. They are colorful and enjoyable. They make a great impression (perhaps, the main reason is that the designer used playful and catchy colors to create this set. Their main strength is that they are quite simple and not only in terms of being used. It’s not too difficult to create similar buttons (and you can be sure they will be used only by you, a sort of your own signature).

UI/UX Flat design – Free PSD on Behance

Another great present we got from Behance is a design kit created by Julie Champourlier. If simplicity is everything UI design needs nowadays, the following kit is everything a UI designer may dream about. The buttons in this kit have several colors and one common font – what else can you want? Still, if you need another color or came up with one particular font you want to use, you’ll have to create a few buttons of your own, won’t you?

How To Create A Button UI Kit On Your Own?

In general, you need nothing more than a simple code with some elements (like color, font, size) that you’ll be able to replace the way you want (magically, you can turn light-red buttons into blue ones and blue ones into orange ones). Thus, you’ll get an unlimited range of opportunities to adapt your design the way you like. So, what kind of code do you need? DesignContest has prepared everything for you.

All you need is the following code (you can change the colors the way you want but the core should (ideally) remain the same):

<button style=”display: inline-block;

margin-bottom: 0;

font-weight: normal;

text-align: center;

vertical-align: middle;

-ms-touch-action: manipulation;

touch-action: manipulation;
cursor: pointer;

white-space: nowrap;

padding: 5px 16px;

font-size: 14px;

line-height: 1.42857143;

border-radius: 2px;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

color: #fff;

background-color: #99c24d;

border-color: #99c24d;”>Button text</button>

Buttons are like tiny gems in web design. Unique gems are valuable. So, why not to make your web design projects even more precious simply using unique buttons designed by you?