Manmohanjit Singh

CSS3 brings a lot of productivity. Once its fully ready to roll on most browsers, you wouldn’t need to waste any money for Photoshop. You wouldn’t even think of opening Photoshop if you had it. Rounded corners, box shadows, text shadows, multiple backgrounds and many more. CSS3 is a whole new experience.

Anyway, using only CSS3 and no images, here are some buttons that actually look good. I know I’m bad with color choosing but I tried my best. Its pretty simple actually, I used CSS3 for three things for this buttons which are:

• Rounded Corners
• Box Shadows
• Text Shadows

Rounded corners to give it the Web 2.0 look, box shadows to replace gradients and text shadows to make it look cool.

Here is the CSS code used for the blue button:

button.blue {
	background: #6B90D4;
	height: 32px;
	min-width: 75px;
	border: 3px solid #052A6E;
	/* -- CSS 3 */
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	-moz-box-shadow: inset #1047A9 0 6px 14px;
	-webkit-box-shadow: inset #1047A9 0 6px 14px;
	box-shadow: inset #1047A9 0 6px 14px;
	text-shadow: #6B90D4 1px 1px 1px;
	/* /- CSS 3 */
	padding: 5px;
	text-align: center;
	color: #052A6E;
	font-family: "Lucida Grande", "Verdana", sans-serif;
	font-weight: 600;
	font-size: 14px;
}
button.blue:hover, button.blue:focus {
	/* -- CSS 3 */
	-moz-box-shadow: inset #1047A9 0 8px 14px;
	-webkit-box-shadow: inset #1047A9 0 8px 14px;
	box-shadow: inset #1047A9 0 12px 14px;
	/* /- CSS 3 */
	padding: 5px;
}

HTML:

Submit Query