CSS3: Making buttons with CSS gradients

This entry is part 3 of 13 in the series CSS3

Using CSS3, we can design some nice subtle buttons without any images.

As the gradients are scalable, you will find that it is actually less hassle to design buttons using CSS3 than to use images.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - CSS3</title>
    <style>
        div.container {
            height: 200px;
            width: 200px;
            background: -moz-linear-gradient(white, black);
            background: -webkit-linear-gradient(white, black);
            background: linear-gradient(white, black);
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class='container'>
    <p>Oversized Button</p>
</div>

</body>
</html>

Line 10 above is for Mozilla Firefox.  Line 11 is for Safari and Chrome webkit.  Line 12 is the official CSS3 gradient.

The white and black inside the brackets are the start and stop colors of the gradient.

Series Navigation<< CSS3: Creating a responsive design with media queries
CSS3: Designing buttons with attributes >>