Style Tips for Generating Great HTML Buttons
The button generator gives you a blank canvas upon which you can design buttons to your heart's content. But if the white space is stifling your creative spirit, here are a few simple style tips to get you started.
Inject Some Color
A great place to start is to simply flood the button generator with some bright punchy colors. Afterall, buttons are there to be seen and clicked on and bright colours are a great way of encouraging your users to do just that.
Start on the 'Background' tab of the styler above. There you will find two options:
- Background Color, and;
- Background Hover Color
The first, background color, is simply the color of the button behind the text and border. Click on the input box which, unless you've already changed it, says #F9F9F9. When you click inside this box a colour chooser appears.
To use the colour chooser, click anywhere in the color field to choose a color you like and then use the slider on the right hand side to adjust how dark or light the colour should be.
Next, do the same for the Background Hover Color. Now go and 'hover' with your mouse / pointer and see what happens. The button changes from the background color to the background hover color when you hover over it.
Set Custom Button Text
As you customise your button using the menu on the left, the text inside the button updates to reflect the attributes you have given it. i.e. 'left aligned' or 'x-large'.
Set custom text for your button design using the 'Text' tab in the button styler. This will make the button feel more real and like you designed it.
If you're unsure what to say, try short and direct language such as 'Download Now' or 'Book Today'.
Square or Rounded?
Corners are everyone's favourite. The difference rounded corners or square corners makes to your design is really noticable. Or, if you're feeling really clever you can have some of your corners rounded and some of them square like the button style Seville.
Changing your button's corners is easy. Head to the 'Borders' tab in the styler above (that's the first tab on the left) and start making changes to the 'Border Radius' input.
The greater the border radius value is, the more rounded the corners of your button become.
If you would like to make different corners different amounts of round then you'll need to select the 'Individual Borders' option on the 'Borders' tab and this will allow you to change each of the buttons' four corners individually.
Hopefully this little guide has given you some design inspiration for your buttons. For more design inpsiration check out the button styles page.