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.
background-position: 0 0;
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;
margin: 20px auto;
padding: 12px 28px;
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;
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.
text-shadow: 0px 1px 1px #600;
Then, the HTML markup:
<input type="button" class="button red" value="Red Button" />
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!