How To Create Buttons Using Textures with CSS3

By Nathan Segal

In this article we're going to look at a simple method of creating buttons using CSS3 and textures. While it's possible to do a lot of styling with code, you can really geek yourself out and create really cool, but time consuming projects. 

My recommendation is to use code for some effects, then at a certain point (which only you as the designer can determine), I recommend using image illustration or photo manipulation programs such as: Adobe Photoshop, Illustrator, CorelDRAW, PHOTO-PAINT, Paintshop Photo Pro or GIMP to create the components.

When it comes to textures, you can use free textures online, royalty free textures or create your own, using software. My program of choice is Corel PHOTO-PAINT X5 (part of the CorelDRAW application) because the texture creation options are amazing and virtually unlimited. 

If you've never used PHOTO-PAINT, here's a quick tutorial to get you started (this is with PHOTO-PAINT X5). With the program running, go to File: New.

In the Create a New Image dialog box, use the following settings:

 

Width:       150px

Height:      30 px

Measurement: Pixels

Resolution:  96 dpi

Color Mode:  24-Bit RGB

 

Click on OK.

Next, you'll learn how to create textures. Click on the Fill tool (F) on the lower left to activate it, then go up to the menu bar and click on the blue textured icon. To the immediate right of that is the Edit Fill icon. Click on it to open the Texture Fill dialog box.

 

Note: To the right of the Edit Fill icon, you'll see several settings. For now, leave those at the default. Later, when you've chosen a texture, you can experiment with transparency, layering, and more.

This is where the magic begins. At the top left you have access to the Texture library, where you'll find a rich assortment of textures. On the top right, you'll see the texture number when you click on the Preview button on the lower left. Clicking on that will change the texture and the colors on the lower right. You'll also see the texture number change. You can now set the colors on the lower right manually. When you're satisfied with your texture, click on OK. This will take you back to the workspace.

To apply the texture, hover your cursor over the white space in the image file you created. You'll see that it turns into a paint bucket icon. Click to apply the texture. After that, you can experiment with the tolerance, transparency and merge modes. Once you get started you'll find it to be quite addictive. You'll be able to create some really cool textures for your projects.

Once the texture is done, it's time to create a simple button with a hover. Note that for this tutorial, I've used Adobe Dreamweaver CS6 to put everything together.

The first step is to create a rectangular button shape with background image and some text inside it. In this case I set the size of the texture to match the CSS dimensions below:

 

#button {

     width: 150px;

     height: 30px;

     background-image: url(redfoil.jpg);

     font-size: 14px;

     font-family: Tahoma, Geneva, sans-serif;

     font-weight: bold;

     text-align: center; 

}

and here's the HTML

 

<div id="button">

<ul>

<li><a href="index.html">BUY NOW</a></li>

</ul>

</div>

Here's the end result. As you can see, we have a dark texture here and we have to lighten the text, center it and so on to get the effect we're after. For the next step I'm going to add a border and the CSS3 border-radius property. 

 

#button {

     width: 150px;

     height: 30px;

     background-image: url(redfoil.jpg);

     border:2px solid black;

     border-radius: 10px;

     font-size: 14px;

     font-family: Tahoma, Geneva, sans-serif;

     font-weight: bold;

     text-align: center; 

}

And here's the result. In the next step we're going to remove the bullet point and set the position of the text in the button.

 

#button ul {

     height: auto;

     padding: 6px 0px;

     margin: 0px;

}

This is the result. Now we're going to remove the underline of the text and change the font color.

 

#button a {

     text-decoration: none;

     color: #FFF;

}

As you can see, the button is really starting to take shape. Our final step is to apply the CSS3 opacity property. Note that 1.0 indicates full opacity and numbers less than 1.0 indicate various levels of opacity. Note also that this property also affects the text, so when you use this property, you need to take care not to overdo the effect. Here's the code:

 

#button:hover {

        opacity:.8;

}

</style>

Here's the look of the button with the hover to the right. Here's all of the code used in this article:

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

#button {

     width: 150px;

     height: 30px;

     background-image: url(redfoil.jpg);

     border:2px solid black;

     border-radius: 10px;

     font-size: 14px;

     font-family: Tahoma, Geneva, sans-serif;

     font-weight: bold;

     text-align: center; 

}

#button ul {

     height: auto;

     padding: 6px 0px;

     margin: 0px;

}

#button a {

     text-decoration: none;

     color: #FFF;

}

#button:hover {

    opacity:.8;

  }

</style>

<title>Untitled Document</title>

</head>

<body>

<div id="button">

<ul>

<li><a href="index.html">BUY NOW</a></li>

</ul>

</div>

</body>

</html>

 

 

Conclusion

Creating a button in this way only scratches the surface of what you can do with CSS3. In the resource section you'll find one resource for great button design. As you'll see, there are many options and you can spend many hours experimenting with different layouts and designs. Have fun!

 

Resources

Create Stylish Buttons with CSS3


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •