CSS Button Generator

GigaBook Web Developer Tools

Quickly create a button with some of the latest CSS3 features. Using the CSS button generator you are able to change the dimensions, fonts, backgrounds, borders and shadows. All with easy to use sliders and colour pickers. To demonstrate the type of buttons you can create with this tool we are going to create a number of templates you can use as a starter for your button.

CSS Button Generator

The CSS button generator is separated up into 5 different sections

  • Size
  • Text
  • Background
  • Border
  • Shadow

The size tab will let you change the height and the width of the button along with the padding that's going to be used inside the button.

The text tab will let you change the text used on the button. This is also where you will change the font styling used on the CSS button, here you can change the font, text colour, font size, font styling.

The background tab will let you change the background styling of the CSS button, you can choose between a solid colour or a gradient between two colours.

If you want to change the border styling around the button styling around the CSS button you can use the border tab to change the style, size, colour, and border radius.

Using similar functionality to our CSS box shadow generator, you can create box shadow and text shadow for your button. Set shadow colour, blur, spread and offset in the shadow section.

The CSS button generator has a live preview of you changing the properties so you can see what the different CSS properties does in real time.

Full HTML and CSS is then generated for you to copy and paste the code into your site.

Live Preview

To make creating CSS buttons as easy as possible, the generator comes with a live preview that will instantly update with every change that you make. This is shown at the top of the screen throughout and will represent exactly how the button will look when you export the code at the end.

Templates

The CSS button generator comes with a number of preset templates which you can use as base for your CSS button. By clicking on these buttons it will change the settings to represent this CSS button. If you notice a button that you want to be added to the preset list let us know by commenting on this post.

Size

The first tab of the CSS button generator will ask you to select the size of your button. There are 3 options the height, width and padding of the button, these come with sliders to make it easy to change the value of these settings.

Text

The text tab allows you to change all settings of the text on the button, enter the words you want to appear on the button. Change the alignment you want the text to be displayed, by default this will be centered in the middle of the button. Use the colour picker to change the colour of the text on the button.

Select the font family for the text, you have the options of 7 of the most popular browser fonts. We have also included 30 of most popular fonts that can be found on Google web fonts. When the Google web fonts are used we provide the HTML for the Javascript file that needs to be included on your page.

Next you can use the slider to change the font size of the text. Use the checkboxes to change the styling of the font that have been selected.

Background

To make picking the background colour of the button as easy as possible you will use the colour picker to select any colour that you want. You have the option to have one solid colour or a gradient between the two colours. When you select the second colour the button will change to a gradient from the first colour to the second colour.

Border

If you want to add a border to your button, use this tab to select the size, style and colour of the border. With CSS3 you can easily add border radius, use the slider to add a border radius to your button.

Shadow

Using the shadow tab will allow you to add a box shadow to the entire button or you can add a shadow to the text inside the button. CSS box shadow comes with functionality to inset the shadow, this will add the shadow inside the button. With the button generator this is a good feature to use to add shading to inside of the button.

Use the sliders to change the vertical shadow distance, horizontal shadow distance, blur distance and colour of the shadow.

HTML & CSS

Whenever you make a change to the button from the previous tabs you will get a live preview of how the button looks at the top of the page. At the same time the HTML and CSS is automatically updated to represent the button you are creating. You can simply copy and paste the HTML and CSS to use directly on your website.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!