Hướng dẫn tạo nút 3D với CSS3

3D Style

ul li {
	display: inline-block;
	margin-right: 20px;
}

.button-container {
	background:#8bcdda;
	background:-moz-radial-gradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
	background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0,#a4d0d3),color-stop(100%,#257fa1));
	background:-webkit-radial-gradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
	background:-o-radial-gradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
	background:-ms-radial-gradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
	background:radial-gradient(ellipse at center,#a4d0d3 0,#257fa1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4d0d3', endColorstr='#257fa1', GradientType=1);
	position:relative;
	min-height: 500px;
}

.button-container-inner {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
}

.button {
    border: 0 none;
    border-radius: 5px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 34px;
    font-weight: 700;
    line-height: 27px;
    margin-bottom: 0;
    margin-top: 0;
    min-width: 170px;
    padding: 23px 14px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 #C26900;
}

.button.orange {
	background-color: #FF910F;
	box-shadow: 0 5px 0 #DB7700;
}

.button.orange:hover {
	-webkit-box-shadow:0 5px 0 #db7700,0 0 40px #fff;
	-moz-box-shadow:0 5px 0 #db7700,0 0 40px #fff;
	box-shadow:0 5px 0 #db7700,0 0 40px #fff;
	background:#ffa81e
}

.button.purple {
	background-color: #994c66;
	box-shadow: 0 5px 0 #7a3c51;
}

.button.purple:hover {
	-webkit-box-shadow:0 5px 0 #7a3c51,0 0 40px #fff;
	-moz-box-shadow:0 5px 0 #7a3c51,0 0 40px #fff;
	box-shadow:0 5px 0 #7a3c51,0 0 40px #fff;
	background:#a35d75
}

.button.light-blue {
    background-color: #369FE0;
    box-shadow: 0 5px 0 #208BCE;
    text-shadow: 0 -1px 0 #208BCE;
}

.button.light-blue:hover {
	background-color:#4da7de;
	-ms-transition:all .2s ease-out;
	-webkit-transition:all .2s ease-out;
	-moz-transition:all .2s ease-out;
	-o-transition:all .2s ease-out;
	transition:all .2s ease-out;
	-webkit-box-shadow:0 5px 0 #208bce,0 0 40px #fff;
	-moz-box-shadow:0 5px 0 #208bce,0 0 40px #fff;
	box-shadow:0 5px 0 #208bce,0 0 40px #fff
}

/* ======================= NUT CO THE CLICK CHUOT DUOC ======================= */

.button.clickable {
	border: none;
	border-bottom: 3px solid #b93207;
	text-decoration: none;
}

.button.clickable:focus, .button.clickable:hover {
	outline: none;
}

.button.clickable:active {
	border: none;	
}

.button.clickable.dark-red {
	background: #e05d22; /* Old browsers */
	background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
}

.button.clickable.dark-red:focus, .button.clickable.dark-red:hover {
	background: #ed6a31; /* Old browsers */
	background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
}

.button.clickable.dark-red:active {
	background: #d94412; /* Old browsers */
	background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
	background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
	border-top: 3px solid #b93207;
}