Home arrow Style Sheets arrow Create Sleek Buttons with CSS3
STYLE SHEETS

Create Sleek Buttons with CSS3


The release of CSS3 has brought about a host of eye-catching user interfaces, rich in both functionality and looks. In addition to allowing you to create engaging web elements such as containers, headers, and navigation bars, you can also use cascading style sheets to create stylish buttons with rounded corners, shadows, and gradients. That is what this tutorial is all about.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
July 26, 2011

print this article
SEARCH DEVARTICLES

The release of CSS3 has brought about a host of eye-catching user interfaces, rich in both functionality and looks. In addition to allowing you to create engaging web elements such as containers, headers, and navigation bars, you can also use cascading style sheets to create stylish buttons with rounded corners, shadows, and gradients. That is what this tutorial is all about.

As usual, the most effective way to demonstrate how to do anything is with some concrete and functional code samples. With that said, in this tutorial I’ll be showing you how to combine the functionality of some of the most popular properties included with the new CSS specification - such as “text-shadow”, “box-shadow”, “gradient” and “border-radius”- in order to build a stylish, imageless button, which you’ll be able to customize at will.

Taking the First Step: Building a Sample HTML Form

Considering that my purpose here is to illustrate how easy it is to build sleek buttons by using some of the properties packaged with CSS3, the first thing that I need to do is to create a realistic context where the buttons can be used. To achieve this, below I created a simple search form, which not surprisingly includes - you guessed it - a search button!

Based on this common structure, I’ll be using the functionality of CSS3 to polish the button’s appearance in order to make it look much more attractive. But first things first; here’s the web page that contains the aforementioned form. Take a close look at it:   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating buttons with CSS3</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Creating buttons with CSS3</h1>
        <h2>Header Section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
       <h2>Search form</h2>
        <form action="search.php" method="get">
            <fieldset>
                <ol>
                    <li>
                        <input type="text" name="query" id="query" class="text" />
                        <input type="submit" name="search" value="Search" class="search" />
                    </li>
                </ol>
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

The structure of this sample search form is anything but complicated, as it only includes a text box and a submit button. For obvious reasons, the button in its current state looks somewhat primitive and rough, but this is about to change, as in the following section I’ll be improving its appearance by using a few CSS3 rounded corners, shadows and gradients.

Decorating the Form Button with Gradients, Shadows and Rounded Corners

There’re many ways to improve the look of a button, including the one that you saw in the preceding section. In this case though, I plan to implement this “cosmetic” process by using a balanced combination of subtle shadows, rounded corners and native gradients.

Here’s the modified version of the previous web page, which this time defines a set of styles that improve the appearance of the whole search form. Check it out:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating buttons with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    margin: 0 0 10px 0;
    font-size: 3.5em;
    color: #653b13; 
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #653b13; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* search form elements */
form {
    width: 400px;
    padding: 20px 10px 10px 20px;
    background: #fcbe7b;
    border-radius: 6px;
    border: 1px solid #8d6103;
}
form fieldset {
    border: none;
}
form fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
form fieldset ol li {
    margin-bottom: 10px;
}
form fieldset ol label {
    display: block;
    margin: 6px;
    font-weight: bold;
    text-transform: capitalize;
    color: #653b13;
}
form fieldset ol label em {
    font-style: normal;
    font-weight: normal;
    color: #653b13;
}
form fieldset ol input.text {
    width: 250px;
    padding: 6px;
    border: 1px solid #8d6103;
}
/* search button */
form fieldset ol input.search {
    width: 90px;
    height: 30px;
    background-color: #c67426;
    font-size: 1em;
    font-weight: bold;
    color: #653b13;
    border: 1px solid #8d6103;
    cursor: pointer;
    cursor: hand;
    border-radius: 6px;
    background: -moz-linear-gradient(#faaf69, #c67426);
    background: -webkit-gradient(linear, left top, left bottom, from(#faaf69), to(#c67426));  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faaf69', endColorstr='#c67426');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#faaf69', endColorstr='#c67426')";
    text-shadow: rgba(255, 204, 153, 1) 0 1px;
    box-shadow: rgba(251, 225, 198, 1) 1px 1px; 
    -webkit-box-shadow: rgba(251, 225, 198, 1) 1px 1px; 
    -moz-box-shadow: rgba(251, 225, 198, 1) 1px 1px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Creating buttons with CSS3</h1>
        <h2>Header Section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
       <h2>Search form</h2>
        <form action="search.php" method="get">
            <fieldset>
                <ol>
                    <li>
                        <input type="text" name="query" id="query" class="text" />
                        <input type="submit" name="search" value="Search" class="search" />
                    </li>
                </ol>
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

Here, a simple combination of rounded corners, some soft shadows, and a linear gradient is all that you need to create a button that looks good in most modern browsers. Not surprisingly, Internet Explorer doesn’t support many of the CSS3 properties used in the previous example; nevertheless I decided to appeal to its ugly “filter” property to make it render a decent gradient as an “acceptable” fallback option.

So far, so good. If you’re anything like me, at this moment you’ll be eager to see how the button (and the whole search form) looks after tweaking its appearance. Here is a snapshot of its appearance:

That looks pretty good, right? Taking into account that improving the button’s presentation only required a few straightforward CSS styles, the result is pretty satisfactory. Naturally, there’s no need to say that every aspect of the button is entirely customizable; however this will be left as homework for you, in case you want to acquire a stronger background on using the “text-shadow”, “box-shadow”, “border-radius” and “gradient” CSS3 properties.

All in all, I already made my point and showed you how to create a stylish search button utilizing only the functionality provided by a few CSS3 properties. But, as I said before, the styling process can be tweaked at will. Thus, in the next section I’ll be coding some additional styles, which define the appearance of the button in its “active” state.

Creating a Final Example: Styling the Button’s Active State

Defining the appearance of the sample search button in its “active” state is an optional process (feel free to skip over it if you want to). In either case, the process is so simple, that it’d be a shame not to cover it.

Having clarified that, here’s how the earlier web page looks, after adding the CSS fragment that decorates the button in its normal and active states:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating buttons with CSS3 (styling the active state)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    margin: 0 0 10px 0;
    font-size: 3.5em;
    color: #653b13; 
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #653b13; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* search form elements */
form {
    width: 400px;
    padding: 20px 10px 10px 20px;
    background: #fcbe7b;
    border-radius: 6px;
    border: 1px solid #8d6103;
}
form fieldset {
    border: none;
}
form fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
form fieldset ol li {
    margin-bottom: 10px;
}
form fieldset ol label {
    display: block;
    margin: 5px;
    font-weight: bold;
    text-transform: capitalize;
    color: #653b13;
}
form fieldset ol label em {
    font-style: normal;
    font-weight: normal;
    color: #653b13;
}
form fieldset ol input.text {
    width: 250px;
    padding: 6px;
    border: 1px solid #8d6103;
}
/* search button */
form fieldset ol input.search {
    width: 90px;
    height: 30px;
    background-color: #c67426;
    font-size: 1em;
    font-weight: bold;
    color: #653b13;
    border: 1px solid #8d6103;
    cursor: pointer;
    cursor: hand;
    border-radius: 6px;
    background: -moz-linear-gradient(#faaf69, #c67426);
    background: -webkit-gradient(linear, left top, left bottom, from(#faaf69), to(#c67426));  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faaf69', endColorstr='#c67426');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#faaf69', endColorstr='#c67426')";
    text-shadow: rgba(255, 204, 153, 1) 0 1px;
    box-shadow: rgba(251, 225, 198, 1) 1px 1px; 
    -webkit-box-shadow: rgba(251, 225, 198, 1) 1px 1px; 
    -moz-box-shadow: rgba(251, 225, 198, 1) 1px 1px;
}
/* active state of the search button */
form fieldset ol input.search:active {
    box-shadow: rgba(251, 225, 198, 1) 1px 1px, #8c5404 0 0 15px inset;
    -webkit-box-shadow: rgba(251, 225, 198, 1) 1px 1px, #8c5404 0 0 15px inset; 
    -moz-box-shadow: rgba(251, 225, 198, 1) 1px 1px, #8c5404 0 0 15px inset;
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Creating buttons with CSS3 (styling the active state)</h1>
        <h2>Header Section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
       <h2>Search form</h2>
        <form action="search.php" method="get">
            <fieldset>
                <ol>
                    <li>
                        <input type="text" name="query" id="query" class="text" />
                        <input type="submit" name="search" value="Search" class="search" />
                    </li>
                </ol>
            </fieldset>
        </form>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

Here is an image showcasing how the button will look when a user clicks on it: 

Mission accomplished. At this point, it should be clear to you that building eye-catching buttons with CSS3 is a straightforward process that can be mastered with minor effort. Moreover, in the above example, the target button was used within a search form, which is all well and fine. However, a similar approach can be utilized for styling buttons in web page menus, navigation bars, containers and so forth. As usual, the options are numerous and plethoric.

Final Thoughts

Over the course of this article, I demonstrated with a concrete example, (in this case, polishing the look of a simple search form) that the construction of pretty stylish, image-less buttons with CSS3 is much easier than one might think. Of course, it’s valid to stress that the whole styling process isn’t entirely cross-browser, due to some inconsistencies exposed by Internet Explorer (is it just me, or have you heard something like that before?).

Regardless of this, there’s no better time that now for getting the most out of the specification and start using its most popular properties in the creation of engaging user interfacing elements. If you haven’t done so yet, what are you waiting for?

See you in the next web design tutorial!   

 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All Style Sheets Tutorials
More By Alejandro Gervasio


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials