• Free consultations 24/7 and support
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 8am — 2am (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 2h 34 min

    Our business hours:

    Mon — Fri, 8am — 2am (EST)

    US & EU support teams

How To Create A UI Button Kit Of Your Own

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 button design kit

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?

UIUX Flat design - Free - Google Chrome

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?

Posted on July 17, 2017

Category: Tips, Tools, Web Design

Article tags

Are you a Designer?

Join Us

community counts

~150.1k designers


Related Articles
What I wish I knew before I became a designer

What I wish I knew before I became a designer

Clients and Designers, General, Tips

Every profession has ups and downs. When we first apply for a Bachelor of...

LOGO CHOICE RESEARCH | WITH INFOGRAPHICS

LOGO CHOICE RESEARCH | WITH INFOGRAPHICS

General, Infographics, Logo Trends, Surveys, Tips

There are different contests clients hold on our website. Number of logo contests is...