WP-Mix

A fresh mix of code snippets and tutorials

Nice little input button with CSS

Just making a note of the CSS used to make a nice little input button, leftover snippet from a previous project.

This isn’t anything life-changing, just a simple button with light text and dark background.

<style>
input[type="button"] {
	padding: 0.3em 0.6em;
	box-shadow: 0 2px 1px rgba(0,0,0,0.3), 
		      0 1px 0 rgba(255,255,255,0.4) inset;
	background-color: #333;
	color: #fff;
	border: 1px solid #000;
	border-radius: 3px;
	text-decoration: none;
	cursor: pointer;
	}
</style>

Test HTML:

<input type="button" value="Test">

Note to self: add a background gradient for a little extra zing.

★ Pro Tip:

Digging Into WordPress