CSS3 Linear Gradients

Free HTML5 Game Tutorial for Beginners: Page 13

Overview Advantages Prefixes Gradient Design Example Gradient Summary Mobile HTML Markup Desktop HTML Markup
Linear Graded Buttons

Overview

This tutorial demonstrates how to create buttons with a linear gradient background using CSS3. This lesson briefly explains the advantages and disadvantages of CSS3 gradients.

Graphics for each button display below. A CSS3 styled button displays first or above a GIF button. The styled button might look similar to the GIF button. However buttons render differently in various Web browsers.

CSS3 Linear Gradient Versus GIF Buttons

Button with Blue Gradient

CSS3 Gradient Advantages

CSS3 gradients eliminate the need to prepare graphics with gradients, then download each graphic. CSS3 creates crisp clean lines which don't become blurry when enlarged.

Disadvantages

Unfortunately different browsers expect different syntax when declaring rule-sets which define gradients. The background gradients for the CSS3 linear gradient button in the CSS3 Linear Gradient Versus GIF Buttons above, require five different prefixes. Four prefixes are provided to display gradients for the range of popular browsers. The fifth property is the default for those browsers which don't support gradients.

Design the Gradient

Fortunately CSS rule-sets which declare gradients, include a number of similarities between browsers. First, popular browsers accept colors in hexadecimal format. Second, the value top works the same within browsers which support gradients.

The value top indicates gradient colors start at the top of an element and gradually change toward the bottom. The first color value becomes the top color. The second color value becomes the bottom color.

Third browsers which don't support CSS3 gradients, continue to accept a default background color. The example linear gradient rule-set includes background: #1929e0;. Buttons in older browsers display with a light blue green.

Linear Gradient Prefixes

The following prefixes declare linear gradients in a set of browsers.

  1. -webkit-linear-gradient for Chrome versions 10 through 25, and Safari version 5.1 and higher.
  2. -o-linear-gradient for Opera versions 11.1 to 12.3.
  3. -moz-linear-gradient for Firefox versions 3.6 to 15.
  4. linear-gradient the standard format.

Example Button Gradient

The CSS button selector below, styles all buttons by default. The border value solid 1px blue, creates a solid blue border one pixel wide.

The gradient starts at the top with hexadecimal color #1929e0 and ends at the bottom with color #137fff. The example linear gradient rule-set applies the top color as the default background color for those browsers which don't support CSS3 gradients.

The following listing demonstrates creating a linear gradient background for buttons.

Linear Gradient Rule-Set

button{
color:white;
border:solid 1px blue; 
background: #1929e0;  
background: -moz-linear-gradient(top,  #1929e0,  #137fff);    
background: -webkit-linear-gradient(top,  #1929e0, #137fff); 
background: -o-linear-gradient(top,  #1929e0, #137fff);    
background: linear-gradient(top,  #1929e0, #137fff);
}
		

To display the button in an HTML Web page simply use the button tag.

<button>Button Label Here</button>

More Options

Any colors which fit within the RRGGBB color format, can be used for gradients.

There are many more options for gradients, such as radial gradients, gradients by angle, and sets of colors with stop positions. This tutorial demonstrates one simple use of this great feature.

Summary

This tutorial demonstrated how to create buttons with a linear gradient background using CSS3. This lesson briefly explained the advantages and disadvantages of CSS3 gradients.

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.