Code a Nice Looking CSS Button

Here is a quick code snippet that will build a good looking CSS button in 3D, we will be using the CSS : before selector which inserts content before the content of the selected element.

Pink Button!

CSS Code

#button {
	width:165px;
	height:23px;
	display:block;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #CD7794;
	padding-top:12px;
	margin:auto;
	left:30px;
	position:relative;
	border-left: solid 1px #CD7794;
	background-image: linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;
	-moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;
	-o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;
	box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;
}

#button {

width:165px;

height:23px;

display:block;

font-size:12px;

font-weight:bold;

color:#fff;

text-decoration:none;

text-align:center;

text-shadow:1px 1px 0px #CD7794;

padding-top:12px;

margin:auto;

left:30px;

position:relative;

border-left: solid 1px #CD7794;

background-image: linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

-webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;

-moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;

-o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;

box-shadow: inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0;

}

The :active selector is used to select and style the active link.

#button:active {
	top:3px;
	-webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;
	-moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;
	-o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;
	box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;
}

#button:active {

top:3px;

-webkit-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;

-moz-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;

-o-box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;

box-shadow: inset 0px 1px 0px #F2DEE7, 0px 2px 0px 0px #CD7794, 0px 5px 3px #E8E5E0;

}

The :before selector inserts content before a selected element

#button:before {
	content:":-)";
	width:35px;
	height:25px;
	display:block;
	position:absolute;
	padding-top:10px;
	top:0px;
	margin-left:-37px;
	font-size:16px;
	color:#fff;
	text-shadow:1px 1px 0px #CD7794;
	border-right:solid 1px #CD7794;
	background-image: linear-gradient(bottom, rgb(245,170,2005) 0%, rgb(250,201,220) 100%);
	background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;
	-moz-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;
	-o-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;
	box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;
}

#button:before {

content:":-)";

width:35px;

height:25px;

display:block;

position:absolute;

padding-top:10px;

top:0px;

margin-left:-37px;

font-size:16px;

color:#fff;

text-shadow:1px 1px 0px #CD7794;

border-right:solid 1px #CD7794;

background-image: linear-gradient(bottom, rgb(245,170,2005) 0%, rgb(250,201,220) 100%);

background-image: -o-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -moz-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

background-image: -ms-linear-gradient(bottom, rgb(245,170,200) 0%, rgb(250,201,220) 100%);

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-bottomleft: 5px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;

-moz-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;

-o-box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;

box-shadow:inset 0px 1px 0px #F2DEE7, 0px 5px 0px 0px #CD7794, 0px 10px 5px #E8E5E0 ;

}

#button:active:before {
	top:-3px;
	-webkit-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;
	-moz-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;
	-o-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;
	box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;
}

#button:active:before {

top:-3px;

-webkit-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;

-moz-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;

-o-box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;

box-shadow:inset 0px 1px 0px #CD7794, 0px 5px 0px 0px #F5AAC8, 1px 1px 0px 0px #FAC9DC, 2px 2px 0px 0px #FAC9DC, 2px 5px 0px 0px #FAC9DC, 6px 4px 2px #F2DEE7, 0px 10px 5px #E8E5E0 ;

}

HTML

<div><a id="button" href="#">Pink Button!</a></div>

1	<div><a id="button" href="#">Pink Button!</a></div>

Note: For :before to work in IE8, a <!DOCTYPE> must be declared.

Related