Button backgrounds

button_bckgnds.css

/**
 * Button backgrounds
 */

.boxes {
     list-style: none outside none;
     margin: 10px auto;
     overflow: hidden;
     padding: 0px;
     width: 300px;
}

.boxes li {
     cursor: pointer;
     float: left;
     height: 60px;
     margin: 10px;
     transition: background-color 0.2s ease-out 0s;
     width: 300px;
}

.boxes .gray {
     background-color: #808080;
}

.boxes .gray:hover {
     background-color: #cccccc;
}

.boxes-1 li {
     background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.boxes-2 li {
     box-shadow: 0px 60px 50px -30px rgba(255, 255, 255, 0.5) inset;
}

button_bckgnds.html

<h3>Normal box</h3>
	<ul class="boxes">
		<li class="gray">Background color</li>
	</ul>
	<br>	

	<h3>Using semi transparent background</h3>
	<ul class="boxes boxes-1">
		<li class="gray">Background image</li>
	</ul>
	<br>
        
	<h3>Using inset shadow</h3>
	<ul class="boxes boxes-2">
		<li class="gray">Inset shadow</li>
	</ul>
        <a href="http://www.red-team-design.com/faking-transitions-on-gradients">www.red-team-design.com</a>

button_bckgnds.js

// alert('Hello world!');

button_bckgnds.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}