Flexible CSS Gradient Buttons

When I recently redesigned my website, I set out to simplify and better utilize my CSS styles. One of the areas I focused on was the styles I set up for buttons. Though all of the buttons on my site are the same color, I set them up intelligently so I could reuse the styles elsewhere in other projects, and easily add another class on top of the general “button” class. I wanted to give a very slight gradient effect to my buttons, with a small border radius and a border color slightly darker than the button’s background color. That said, here’s a look at the CSS and HTML markup I used to pull everything together.

A few quick notes on the main button class:

  • I use a background-color, an actual image for background-image, and then the full gamut of gradient values for background-image to override the actual image when allowed by the browser.
  • The gradients I set up for the background have rgba values, which go from 17% white to 0% white. This allows a change in background color without needing to adjust the gradient every time a new color is used for the background.
  • I also use an inset box-shadow to create a slight white hairline along the top of the button, inside the border.

The CSS:
.button {
  background-color: #3396e8;
  background-image: url(path/to/images/button_bg_shine.png);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.17)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.17), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.17), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.17), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,0.17),rgba(255,255,255,0));
  border: 1px solid #2978b9;
  color: white;
  cursor: pointer;
  display: block;
  font-size: 1.0em;
  font-weight: bold;
  margin: 20px auto;
  padding: 12px 28px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  text-shadow: 0 1px 1px #2469a2;
  box-shadow: inset 0 1px 1px -1px white;
  -moz-box-shadow: inset 0 1px 1px -1px white;
  -webkit-box-shadow: inset 0 1px 1px -1px white;
}
.button:hover {
  background-color: #38a1ea;
}
.button:active {
  background-color: #0268dd;
}

With this CSS set up, I can simply attach the class button to my HTML elements like so:

<input type="button" class="button" value="Default Button" />

The real beauty of this setup comes in when I want to use a button with a different color. For instance, if I want to use a red button, I can simply create a new CSS class and add it to my HTML element.

The CSS:
.button.red {
  background: #c00;
  border-color: #900;
  text-shadow: 0px 1px 1px #600;
}
.button.red:hover {
  background: #f00;
}
.button.red:active {
  background: #900;
}

Then, the HTML markup:
<input type="button" class="button red" value="Red Button" />

The Result:

 

So there you have it. A flexible set of CSS styles you can leverage to add a slight light gradient over whatever background color you wish to use, all by adding an extra class to change a few CSS rules that override the general button class.

Until next time, happy coding!

There are no comments yet, add one below.

Leave a Comment