} .action-button:active { background: -webkit-gradient( linear, left bottom, left top, from(#86aceb), to(#347ee2) /* Gradient colors, inverted. */ ); position: relative; top: 3px; /* Give it that "depressed button" look. */ }

Tap me

Here’s a quick style I wrote for creating buttons that look tappable.

.action-button {
	display: block;
	width: 120px;
	padding: 7px;
	text-align: center;
	color: #fff;
	font-size: 15px;
	font-family: 'hevetica neue',helvetica,arial,sans-serif;
	cursor: pointer;
	text-shadow: #145ec2 0 -1px 0;
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#347ee2), to(#86aceb),
		color-stop(0.5, #347ee2), /* Dark value */
		color-stop(0.5, #548fe5) /* Medium value */
	);
	-webkit-border-radius: 4px; /*  */
	-moz-border-radius: 4px; /*  */
	border-radius: 4px; /*  */

}
.action-button:active {
	background: -webkit-gradient(
		linear, left bottom, left top,
		from(#86aceb), to(#347ee2) /* Gradient colors, inverted. */
	);
	position: relative;
	top: 3px; /* Give it that "depressed button" look. */
}

How it works

• Set the width to whatever fits your requirements.
• For testing in a desktop browser.
• Shadow color should be a shade darker than your darkest gradient.
• Lightest color, in this case, pale blue.
• Medium value creates the illusion of a chrome-like reflection.
• For Webkit browsers like Chrome and Safari.
• For Gecko browsers like FireFox.
• For future browsers.

The angle gradients create clockwise blends of color around the point a user clicks. Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.

Read the full article I wrote at Webdesigner Depot.