CSS Button Generator

in Resources

CSS Button Generator


There are certain things which you do many times in web design and one of them is creating buttons for your pages. Before CSS3 to create a unique button you would have to use some graphically software like photoshop, but now with the new features of CSS there is no need to use this anymore as you can do by just using CSS.

There are many features you can use to create your new CSS button such as, box shadow, text shadow, border radius and colour gradients.

But the problem with using this in CSS is that it takes time to make small edits and tweeks to your designs, because you will have to change the code and then refresh the page. This can get very tedious if you have to make lots of small tweeks. What you need is a preview of the CSS button as you are changing the code.

Then I thought what about web design beginners they need a tool they can use to get used to these features and to see what CSS can really do.

So to make my life easier I would find a CSS generator which uses the most useful CSS features, so I can design the button in the browser and just copy and paste the CSS. I wanted something that will allow me to preview the button before I finished and allow me to easily make small tweeks to the button directly in the browser.

I found many CSS generators but none of them did exactly what I wanted with the amount of ease I was looking for, so I decided to make my own.

I created a new web app which allows you to make a CSS button any shape and size using all the major features new CSS to create a button. What makes this different to the other generators is that you do not need any CSS knowledge to use it or web design experience. The interface uses sliders and colour pickers and will give a automatic preview as you change the sliders.


The CSS button generator has 5 tabs these are separated into groups of Button, Background, Border, Shadow and CSS & HTML.

Button Tab

This tab is used to setup the button it’s where you choose the dimensions, text and the font.

Background Tab

This tab will allow you to choose the background for the button you have the choice of having a solid colour background or a gradient colour background.

Border Tab

This tab will allow you to choose the size, style and colour of the border for your button. This uses a new CSS feature called border radius which helps you create rounded corners for the button.

Shadow Tab

This tab uses two of the new features in the box shadow and the text shadow. You can select the direction of the shadows, the blur radius and the shadow colour.


The last tab will give you the CSS and the HTML needed to recreate the button. Simply just copy and paste this code to your website and you will have the button you created.

To try out this CSS Button Generator go to CSS Button Generator

Please Tweet your feedback @coveloping

Subscribe To Newsletter

Get weekly updates to your email