How to Create a Micro Button in CSS3

Even though the CSS3 form looks quite complicated, you can create a micro button relatively fast. The following procedure leads you through the task of creating a micro button.

  1. Choose a size for the button in the Button Size field.

    The button size determines how much text can appear in the micro button. You should set the size before changing anything else because the size of the button also modifies how the other changes appear onscreen.

  2. (Optional) Check the Rounded Corners option when desired (and available).

    The Rounded Corners option is only available when working with an 88 × 31 button.

  3. (Optional) Check the Use Two Rows for Text option when desired (and available).

    The Two Rows for Text option is only available when working with an 88 × 31 button.

  4. Choose a base color or check Base Color is Transparent.

    The base color appears behind all of the other elements of the button. A transparent base will allow the background to show through. The base color always results in a square image, even if you check the Rounded Corners option.

  5. Choose a border color or check Border Color is Transparent.

    The border color defines the outside of the actual button, but there’s a 1-pixel border between the edge of the border and the end of the base, so that a colored base will always show through. Choosing the Rounded Corners option results in a border with rounded corners.

  6. Choose an option in the Font drop-down list box.

    The tool provides access to two different fonts. The Sans-Serif option works best when using an 88 × 31 button with a vertical bar.

  7. Choose a bar color or make the bar transparent.

    The button always uses a vertical bar for 80 × 15 buttons, but can use either a vertical or horizontal bar for 88 × 31 buttons. The name of the bar option changes to match the bar’s orientation.

  8. Type a value in the Left Side Text field.

    The button can hold about ten characters worth of text total when working with a single row of text with a vertical bar. Each row can accommodate about 19 characters worth of text (38 characters total) when using two rows of text.

  9. Set the Left Side Text field background and foreground colors.

    You can use the Color Picker or type the hexadecimal value into the appropriate fields.

  10. Type a value in the Right Side Text field.

  11. Set the Right Side Text field background and foreground colors.

    You can use the Color Picker or type the hexadecimal value into the appropriate fields.

  12. (Optional) Set the Vertical Bar Position when desired (and available).

    The Vertical Bar Position setting is only enabled when the button uses a vertical bar. Two row text uses the entire width of the button for each row.

  13. Click Update.

    You see all the changes you made to the button.

  14. Make any required changes and click Update after each change.

    Eventually the button will look precisely as you want it to look.

  15. Right-click the button and choose Save Image As from the context menu.

    You see a Save Image dialog box.

  16. 16. Type the name you want to use for the button and click Save.

    The button is ready for use.

blog comments powered by Disqus
Advertisement

Inside Dummies.com