Learn CSS3 to style your web pages

Know what is CSS, its uses and how to add? CSS Style for Text, Paragraphs, Tables, Links and Forms. Background image with CSS, Borders styles in CSS, Set margin and positions in CSS, etc.

CSS Buttons

Basic Button Styling

Link Button

See this example:

.button {
    background-color: #336699; /* blue */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;

Button Colors and Size

See this example:

.button1 {background-color: #008CBA;font-size: 10px;} /* Blue */
.button2 {background-color: #f44336;font-size: 12px;} /* Red */
.button3 {background-color: #e7e7e7; color: black;font-size: 16px;} /* Gray */
.button4 {background-color: #555555;font-size: 24px;} /* Black */

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

See this example:

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Hoverable Buttons