CSS之button样式之悬浮3D效果

@charset "utf-8";

.button-3d {
	position: relative;
	top: 0;
	-webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
}

.button-3d:hover, .button-3d:focus {
	-webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2);
}

.button-3d:active, .button-3d.active, .button-3d.is-active {
	top: 5px;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .15s;
	transition-duration: .15s;
	-webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-primary {
	-webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-primary:hover, .button-3d.button-primary:focus {
	-webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-primary:active, .button-3d.button-primary.active,
	.button-3d.button-primary.is-active {
	-webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-plain {
	-webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-plain:hover, .button-3d.button-plain:focus {
	-webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-plain:active, .button-3d.button-plain.active,
	.button-3d.button-plain.is-active {
	-webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-inverse {
	-webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-inverse:hover, .button-3d.button-inverse:focus {
	-webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-inverse:active, .button-3d.button-inverse.active,
	.button-3d.button-inverse.is-active {
	-webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-action {
	-webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-action:hover, .button-3d.button-action:focus {
	-webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-action:active, .button-3d.button-action.active,
	.button-3d.button-action.is-active {
	-webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-highlight {
	-webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-highlight:hover, .button-3d.button-highlight:focus {
	-webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-highlight:active, .button-3d.button-highlight.active,
	.button-3d.button-highlight.is-active {
	-webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-caution {
	-webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-caution:hover, .button-3d.button-caution:focus {
	-webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-caution:active, .button-3d.button-caution.active,
	.button-3d.button-caution.is-active {
	-webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-royal {
	-webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-royal:hover, .button-3d.button-royal:focus {
	-webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-royal:active, .button-3d.button-royal.active,
	.button-3d.button-royal.is-active {
	-webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-rounded {
	border-radius: 4px;
}

.button {
	color: #666;
	background-color: #EEE;
	border-color: #EEE;
	font-weight: 300;
	font-size: 16px;
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial,
		"Lucida Grande", sans-serif;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	height: 40px;
	padding: 0 40px;
	margin: 0;
	display: inline-block;
	appearance: none;
	cursor: pointer;
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
}

.button-primary, .button-primary-flat {
	background-color: #1B9AF7;
	border-color: #1B9AF7;
	color: #FFF;
}

.button-primary:visited, .button-primary-flat:visited {
	color: #FFF;
}

.button-primary:hover, .button-primary:focus, .button-primary-flat:hover,
	.button-primary-flat:focus {
	background-color: #4cb0f9;
	border-color: #4cb0f9;
	color: #FFF;
}

.button-primary:active, .button-primary.active, .button-primary.is-active,
	.button-primary-flat:active, .button-primary-flat.active,
	.button-primary-flat.is-active {
	background-color: #2798eb;
	border-color: #2798eb;
	color: #0880d7;
}

.button-border.button-primary, .button-primary.button-border-thin,
	.button-primary.button-border-thick, .button-border-thin.button-primary,
	.button-border-thick.button-primary {
	color: #1B9AF7;
}

.button-border.button-primary:hover, .button-primary.button-border-thin:hover,
	.button-primary.button-border-thick:hover, .button-border.button-primary:focus,
	.button-primary.button-border-thin:focus, .button-primary.button-border-thick:focus,
	.button-border-thin.button-primary:hover, .button-border-thin.button-primary:focus,
	.button-border-thick.button-primary:hover, .button-border-thick.button-primary:focus
	{
	background-color: rgba(76, 176, 249, 0.9);
	color: rgba(255, 255, 255, 0.9);
}

.button-border.button-primary:active, .button-primary.button-border-thin:active,
	.button-primary.button-border-thick:active, .button-border.button-primary.active,
	.button-primary.active.button-border-thin, .button-primary.active.button-border-thick,
	.button-border.button-primary.is-active, .button-primary.is-active.button-border-thin,
	.button-primary.is-active.button-border-thick, .button-border-thin.button-primary:active,
	.button-border-thin.button-primary.active, .button-border-thin.button-primary.is-active,
	.button-border-thick.button-primary:active, .button-border-thick.button-primary.active,
	.button-border-thick.button-primary.is-active {
	background-color: rgba(39, 152, 235, 0.7);
	color: rgba(255, 255, 255, 0.5);
	opacity: .3;
}

.button-raised.button-primary {
	border-color: #088ef0;
	background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8),
		to(#088ef0));
	background: linear-gradient(#34a5f8, #088ef0);
}

.button-raised.button-primary:hover, .button-raised.button-primary:focus
	{
	background: -webkit-gradient(linear, left top, left bottom, from(#42abf8),
		to(#0888e6));
	background: linear-gradient(top, #42abf8, #0888e6);
}

.button-raised.button-primary:active, .button-raised.button-primary.active,
	.button-raised.button-primary.is-active {
	border-color: #0880d7;
	background: #2798eb;
}

.button-3d.button-primary {
	-webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-primary:hover, .button-3d.button-primary:focus {
	-webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-primary:active, .button-3d.button-primary.active,
	.button-3d.button-primary.is-active {
	-webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-plain {
	-webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-plain:hover, .button-3d.button-plain:focus {
	-webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-plain:active, .button-3d.button-plain.active,
	.button-3d.button-plain.is-active {
	-webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-inverse {
	-webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-inverse:hover, .button-3d.button-inverse:focus {
	-webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-inverse:active, .button-3d.button-inverse.active,
	.button-3d.button-inverse.is-active {
	-webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-action {
	-webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-action:hover, .button-3d.button-action:focus {
	-webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-action:active, .button-3d.button-action.active,
	.button-3d.button-action.is-active {
	-webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-highlight {
	-webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-highlight:hover, .button-3d.button-highlight:focus {
	-webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-highlight:active, .button-3d.button-highlight.active,
	.button-3d.button-highlight.is-active {
	-webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-caution {
	-webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-caution:hover, .button-3d.button-caution:focus {
	-webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-caution:active, .button-3d.button-caution.active,
	.button-3d.button-caution.is-active {
	-webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-3d.button-royal {
	-webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-royal:hover, .button-3d.button-royal:focus {
	-webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3);
}

.button-3d.button-royal:active, .button-3d.button-royal.active,
	.button-3d.button-royal.is-active {
	-webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2);
}

.button-glow.button-primary {
	-webkit-animation-name: glowing-primary;
	animation-name: glowing-primary;
}

.button-longshadow.button-primary, .button-longshadow-right.button-primary
	{
	text-shadow: 0px 0px #0880d7, 1px 1px #0880d7, 2px 2px #0880d7, 3px 3px
		#0880d7, 4px 4px #0880d7, 5px 5px #0880d7, 6px 6px #0880d7, 7px 7px
		#0880d7, 8px 8px #0880d7, 9px 9px #0880d7, 10px 10px #0880d7, 11px
		11px #0880d7, 12px 12px #0880d7, 13px 13px #0880d7, 14px 14px #0880d7,
		15px 15px #0880d7, 16px 16px #0880d7, 17px 17px #0880d7, 18px 18px
		#0880d7, 19px 19px #0880d7, 20px 20px #0880d7, 21px 21px #0880d7, 22px
		22px #0880d7, 23px 23px #0880d7, 24px 24px #0880d7, 25px 25px #0880d7,
		26px 26px #0880d7, 27px 27px #0880d7, 28px 28px #0880d7, 29px 29px
		#0880d7, 30px 30px #0880d7, 31px 31px #0880d7, 32px 32px #0880d7, 33px
		33px #0880d7, 34px 34px #0880d7, 35px 35px #0880d7, 36px 36px #0880d7,
		37px 37px #0880d7, 38px 38px #0880d7, 39px 39px #0880d7, 40px 40px
		#0880d7, 41px 41px #0880d7, 42px 42px #0880d7, 43px 43px #0880d7, 44px
		44px #0880d7, 45px 45px #0880d7, 46px 46px #0880d7, 47px 47px #0880d7,
		48px 48px #0880d7, 49px 49px #0880d7, 50px 50px #0880d7, 51px 51px
		#0880d7, 52px 52px #0880d7, 53px 53px #0880d7, 54px 54px #0880d7, 55px
		55px #0880d7, 56px 56px #0880d7, 57px 57px #0880d7, 58px 58px #0880d7,
		59px 59px #0880d7, 60px 60px #0880d7, 61px 61px #0880d7, 62px 62px
		#0880d7, 63px 63px #0880d7, 64px 64px #0880d7, 65px 65px #0880d7, 66px
		66px #0880d7, 67px 67px #0880d7, 68px 68px #0880d7, 69px 69px #0880d7,
		70px 70px #0880d7, 71px 71px #0880d7, 72px 72px #0880d7, 73px 73px
		#0880d7, 74px 74px #0880d7, 75px 75px #0880d7, 76px 76px #0880d7, 77px
		77px #0880d7, 78px 78px #0880d7, 79px 79px #0880d7, 80px 80px #0880d7,
		81px 81px #0880d7, 82px 82px #0880d7, 83px 83px #0880d7, 84px 84px
		#0880d7, 85px 85px #0880d7;
}

.button-longshadow.button-primary:active, .button-longshadow.button-primary.active,
	.button-longshadow.button-primary.is-active, .button-longshadow-right.button-primary:active,
	.button-longshadow-right.button-primary.active,
	.button-longshadow-right.button-primary.is-active {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button-longshadow-left.button-primary {
	text-shadow: 0px 0px #0880d7, -1px 1px #0880d7, -2px 2px #0880d7, -3px
		3px #0880d7, -4px 4px #0880d7, -5px 5px #0880d7, -6px 6px #0880d7,
		-7px 7px #0880d7, -8px 8px #0880d7, -9px 9px #0880d7, -10px 10px
		#0880d7, -11px 11px #0880d7, -12px 12px #0880d7, -13px 13px #0880d7,
		-14px 14px #0880d7, -15px 15px #0880d7, -16px 16px #0880d7, -17px 17px
		#0880d7, -18px 18px #0880d7, -19px 19px #0880d7, -20px 20px #0880d7,
		-21px 21px #0880d7, -22px 22px #0880d7, -23px 23px #0880d7, -24px 24px
		#0880d7, -25px 25px #0880d7, -26px 26px #0880d7, -27px 27px #0880d7,
		-28px 28px #0880d7, -29px 29px #0880d7, -30px 30px #0880d7, -31px 31px
		#0880d7, -32px 32px #0880d7, -33px 33px #0880d7, -34px 34px #0880d7,
		-35px 35px #0880d7, -36px 36px #0880d7, -37px 37px #0880d7, -38px 38px
		#0880d7, -39px 39px #0880d7, -40px 40px #0880d7, -41px 41px #0880d7,
		-42px 42px #0880d7, -43px 43px #0880d7, -44px 44px #0880d7, -45px 45px
		#0880d7, -46px 46px #0880d7, -47px 47px #0880d7, -48px 48px #0880d7,
		-49px 49px #0880d7, -50px 50px #0880d7, -51px 51px #0880d7, -52px 52px
		#0880d7, -53px 53px #0880d7, -54px 54px #0880d7, -55px 55px #0880d7,
		-56px 56px #0880d7, -57px 57px #0880d7, -58px 58px #0880d7, -59px 59px
		#0880d7, -60px 60px #0880d7, -61px 61px #0880d7, -62px 62px #0880d7,
		-63px 63px #0880d7, -64px 64px #0880d7, -65px 65px #0880d7, -66px 66px
		#0880d7, -67px 67px #0880d7, -68px 68px #0880d7, -69px 69px #0880d7,
		-70px 70px #0880d7, -71px 71px #0880d7, -72px 72px #0880d7, -73px 73px
		#0880d7, -74px 74px #0880d7, -75px 75px #0880d7, -76px 76px #0880d7,
		-77px 77px #0880d7, -78px 78px #0880d7, -79px 79px #0880d7, -80px 80px
		#0880d7, -81px 81px #0880d7, -82px 82px #0880d7, -83px 83px #0880d7,
		-84px 84px #0880d7, -85px 85px #0880d7;
}

.button-longshadow-left.button-primary:active, .button-longshadow-left.button-primary.active,
	.button-longshadow-left.button-primary.is-active {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}