In this article we continue with our look at CSS3 buttons and gradients. You will see some simple coding examples and we will also look at several software programs you can use to create CSS3 effects, quickly. These programs also include vendor prefixes, as well, which will save you time.
CSS3 Gradients
CSS gradients allow to you display smooth transitions between two or more specified colors. Now, you no longer need to use images for these effects, which reduces download time and bandwidth demands. There are two types of gradients you can use. These are linear (linear-gradient) and radial (radial-gradient).
A simple example is the gradient below, which runs vertically.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#grad1 {
height:200px;
background: linear-gradient(to bottom, blue, white);
}
</style>
</head>
<body>
<div id=”grad1″></div>
</body>
</html>
The result.
Color stops have a specific color at that location, which can be a percentage or absolute length. You can add as many color stops as you wish. As an example of how that would work, 0% would be the starting point and 100% the ending point. Here is an example with three colors:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#grad1 {
height:200px;
background: linear-gradient(to right, red , green, blue);
}
</style>
</head>
<body>
<div id=”grad1″></div>
</body>
</html>
The completed gradient.
Here is an example which makes use of transparency. Note the representation of the colors (rgba – red, green, blue, alpha – transparency – 255,0,0,.8).
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#grad {
height:200px;
background: linear-gradient(to right, rgba(255,0,0,.4), rgba(0,255,0,.8), rgba(0,0,0,1));
}
</style>
</head>
<body>
<div id=”grad”></div>
</body>
</html>
And the gradient.
CSS3 Buttons
One thing which will rapidly become apparent is many buttons make use of gradients and of boxes and borders. All of these in combination allow you to create some great effects and all without the need to use images.
Here is a simple CSS3 button with a solid background:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#button
{
border:2px solid black;
padding:10px 10px;
font-size:20px;
font-family:Impact, Haettenschweiler, “Franklin Gothic Bold”, “Arial Black”, sans-serif;
background:#ddffff;
width:100px;
border-radius:25px;
}
</style>
<body>
<div id=”button”>CLICK HERE!</div>
</body>
</html>
The finished button.
This button is about as bare bones as you can get. Fortunately you can spice things up by adding a gradient, experimenting with the border and adding a drop shadow. Here is the code:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style>
#button
{
border:2px #535353
padding:20px 20px;
background: linear-gradient(to bottom, white, blue);
font-size:20px;
font-family:Impact, Haettenschweiler, “Franklin Gothic Bold”, “Arial Black”, sans-serif;
color:#FFFFFF;
width:100px;
border-radius:25px;
box-shadow: 5px 5px 7px #777777;
}
</style>
<body>
<div id=”button”>CLICK HERE!</div>
</body>
</html>
You can go much further than what is available here, but it becomes a bit difficult because of not being able to see the effect until the code is rendered. A better way is to make use of software programs which gives you image previews as you make changes. Some of these include CSS3 effects as part of the interface; others are standalone programs which are web-based or can be downloaded and run on your computer.
One software provider which creates many standalone CSS3 programs is Blumental Software. Of these products, I recommend the Easy Button and Menu Maker. Note that these are paid programs.
Another useful tool is the web-based Easy CSS3 Generator. This one tool gives you many options which are: Button Generator, Border Radius, Box Shadow, Text Shadow and CSS3 Gradients. This program is free to use.
For fast gradients, check out the Ultimate CSS Gradient Generator by Colorzilla. This is a web-based program and is free.
As you see by the screen shot, this program is for creating CSS3 gradients, only. It offers a number of presets or you can quickly create your own, including transparency. You can then copy the code directly for use in your layouts.
For creating layouts, check out Adobe Dreamweaver CC. One of the many great features of this program is it allows you to create fluid layouts. This gives you a starting point for creating flexible CSS layouts for the desktop, tablets and mobile devices.
Adobe Edge Reflow CC is part of the Creative Cloud package. If you create a layout in Photoshop CC, you can make use of the Generator plugin and export your layout to Edge Reflow CC and use that program to stylize your layout even further with a wide variety of CSS3 tools.
Conclusion
As you can see, there are several options to create CSS3 effects and styling. One option is to code everything by hand; another option is to make use of software programs. A third option is to use a software program, create an effect which is close to what you desire then refine it by hand coding.
