CSS Button Generator

CSS Button Generator

CSS Button Generator

Online CSS Button Generator rapidly create CSS buttons for your website. Simply enter your button text, select colors, and other properties to create CSS Button. This is a great free online tool for webmasters to create CSS buttons.

Bookmark:

CSS Button Generator

CSS Button Generator instantly make buttons for your website or blog that use your colors, web fonts, and sizes. The css button generator uses no images and can say anything you want in any colors or size. The css button maker is perfect for Myspace, piczo or Zanga sites where you don't have the ability to upload images but want you own buttons without worrying about dead links. The css button maker can make buttons that can be put into your page content or placed anywhere on top of the page.

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

 Preview 

 CSS Properties 

Button Properties

Text Properties

 

CSS font Property

CSS Value Description
font-style Specifies the font style. See font-style for possible values
font-variant Specifies the font variant. See font-variant for possible values
font-weight Specifies the font weight. See font-weight for possible values
font-size/line-height Specifies the font size and the line-height. See font-size and line-height for possible values
font-family Specifies the font family. See font-family for possible values
caption Uses the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon Uses the font that are used by icon labels
menu Uses the fonts that are used by dropdown menus
message-box Uses the fonts that are used by dialog boxes
small-caption A smaller version of the caption font
status-bar Uses the fonts that are used by the status bar
inherit Specifies that the value of the font property should be inherited from the parent element


CSS font-size Property

CSS Value Description
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
medium Sets the font-size to a medium size. This is default
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc.
% Sets the font-size to a percent of the parent element's font size
inherit Specifies that the font size should be inherited from the parent element


CSS font-style Property

CSS Value Description
normal The browser displays a normal font style. This is default
italic The browser displays an italic font style
oblique The browser displays an oblique font style
inherit Specifies that the font style should be inherited from the parent element


CSS font-weight Property

CSS Value Description
normal Defines normal characters. This is default
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100 - 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold


CSS Border

Property Description Values CSS
border Sets all the border properties in one declaration border-width
border-style
border-color
1
border-bottom Sets all the bottom border properties in one declaration border-bottom-width
border-bottom-style
border-bottom-color
1
border-bottom-color Sets the color of the bottom border border-color 2
border-bottom-style Sets the style of the bottom border border-style 2
border-bottom-width Sets the width of the bottom border border-width 1
border-color Sets the color of the four borders color_name
hex_number
rgb_number
transparent
inherit
1
border-left Sets all the left border properties in one declaration border-left-width
border-left-style
border-left-color
1
border-left-color Sets the color of the left border border-color 2
border-left-style Sets the style of the left border border-style 2
border-left-width Sets the width of the left border border-width 1
border-right Sets all the right border properties in one declaration border-right-width
border-right-style
border-right-color
1
border-right-color Sets the color of the right border border-color 2
border-right-style Sets the style of the right border border-style 2
border-right-width Sets the width of the right border border-width 1
border-style Sets the style of the four borders none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top Sets all the top border properties in one declaration border-top-width
border-top-style
border-top-color
1
border-top-color Sets the color of the top border border-color 2
border-top-style Sets the style of the top border border-style 2
border-top-width Sets the width of the top border border-width 1
border-width Sets the width of the four borders thin
medium
thick
length
inherit
1


CSS border-style Property

CSS Value Description
none Specifies no border
hidden The same as "none", except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
inherit Specifies that the border style should be inherited from the parent element


Online CSS Button Generator Information:

  • Purpose of this Tool : Generate CSS Buttons, Learn CSS
  • Intended Audience : Webmasters, CSS Designers, Web Template Designers, Graphic Designers, Web Developers

External Resources: