@charset "utf-8";
/* 侧边栏悬浮效果css 
 *
 * Author: 德阿姆斯丹
 *
*/
/* 悬浮一  */
.btnEffect {
	border: 1px solid #d0d0d0;
	border: 1px solid rgba(0,0,0,.2);
	position: relative;
}
.btnEffect .btnbg-x {
	position: absolute;
	left: -1px;
	width: 0;
	top: -1px;
	bottom: -1px;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
}
.btnEffect:hover .btnbg-x {
	width: 100%;
	width: calc(100% + 2px);
	background: rgba(203, 215, 255, 0.5);
}

/* 悬浮二 */
.btnEffect2 {
	border: 1px solid #d0d0d0;
	border: 1px solid rgba(0,0,0,.2);
	position: relative;
}
.btnEffect2 .btnbg-x {
	position: absolute;
	left: 50%;
	width: 0;
	top: 0;
	bottom: 0;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent
}
.btnEffect2:hover .btnbg-x {
	width: 100%;
	left: 0;
	background: rgba(203, 215, 255, 0.5);
}

/* 悬浮三  */

.btnEffect3 {
	border: 1px solid #d0d0d0;
	border: 1px solid rgba(0,0,0,.2);
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	position: relative;
	-webkit-transition-property: color;
	transition-property: color;
	-webkit-transition-duration: .5s;
	transition-duration: .5s
}
.btnEffect3:hover {
	color: #fff
}
.btnEffect3 .btnbg-x {
	background: rgba(203, 215, 255, 0.5);
	position: absolute;
	z-index: -1;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	opacity: 0;
*filter:alpha(opacity=0);
	filter: alpha(opacity=0)
}
.btnEffect3:hover .btnbg-x {
	-webkit-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66);
	transition-timing-function: cubic-bezier(.52, 1.64, .37, .66);
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	opacity: 1;
*filter:alpha(opacity=100);
	filter: alpha(opacity=100)
}


/* 悬浮四  */

.btnEffect4 {
	position: relative;
	border: 1px solid #d0d0d0;
	border: 1px solid rgba(0,0,0,.2);
	color: #666;
	overflow: hidden;
	-webkit-transition: border-color .3s, color .3s;
	transition: border-color .3s, color .3s;
	-webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1);
	transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}
.btnEffect4:hover {
	color: #fff;
	/*border-color: #9a59b5*/
}
.btnEffect4 .btnbg-x {
	background: rgba(203, 215, 255, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	opacity: 0;
*filter:alpha(opacity=0);
	filter: alpha(opacity=0);
	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform .3s, opacity .3s;
	transition: transform .3s, opacity .3s
}
.btnEffect4:hover .btnbg-x {
	opacity: 1;
*filter:alpha(opacity=100);
	filter: alpha(opacity=100);
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
	-webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1);
	transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}


/* 悬浮五  */

.btnEffect4 {
	position: relative;
	border: 1px solid #d0d0d0;
	border: 1px solid rgba(0,0,0,.2);
	color: #666;
	overflow: hidden;
	-webkit-transition: border-color .3s, color .3s;
	transition: border-color .3s, color .3s;
	-webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1);
	transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}
.btnEffect4:hover {
	color: #fff;
	/*border-color: #9a59b5*/
}
.btnEffect4 .btnbg-x {
	background: rgba(203, 215, 255, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	opacity: 0;
*filter:alpha(opacity=0);
	filter: alpha(opacity=0);
	-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform .3s, opacity .3s;
	transition: transform .3s, opacity .3s
}
.btnEffect4:hover .btnbg-x {
	opacity: 1;
*filter:alpha(opacity=100);
	filter: alpha(opacity=100);
	-webkit-transform: rotate3d(0, 0, 1, 0deg);
	transform: rotate3d(0, 0, 1, 0deg);
	-webkit-transition-timing-function: cubic-bezier(.2, 1, .3, 1);
	transition-timing-function: cubic-bezier(.2, 1, .3, 1)
}

/* 悬浮五  */

.btnEffect5 {
	position: relative;
	color: #fff;
	background: rgba(203, 215, 255, 0.5);
	-webkit-transition: background-color .3s, color .3s;
	transition: background-color .3s, color .3s
}
.btnEffect5:before {
	content: '';
	position: absolute;
	top: -15px;
	left: -15px;
	bottom: -15px;
	right: -15px;
	background: inherit;
	z-index: -1;
	opacity: .5;
	-webkit-transform: scale3d(.6, .4, 1);
	transform: scale3d(.6, .4, 1);
	display: none\9
}
.btnEffect5:hover {
	background: rgba(203, 215, 255, 0.5);
	-webkit-transition: background-color .1s .3s, color .1s .3s;
	transition: background-color .1s .3s, color .1s .3s;
	-webkit-animation: anim-moema-1 .3s forwards;
	animation: anim-moema-1 .3s forwards
}
.btnEffect5:hover:before {
	-webkit-animation: anim-moema-2 .3s .3s forwards;
	animation: anim-moema-2 .3s .3s forwards
}
@-webkit-keyframes anim-moema-1 {
60% {
-webkit-transform:scale3d(.8, .8, 1);
transform:scale3d(.8, .8, 1)
}
85% {
-webkit-transform:scale3d(1.1, 1.1, 1);
transform:scale3d(1.1, 1.1, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes anim-moema-1 {
60% {
-webkit-transform:scale3d(.8, .8, 1);
transform:scale3d(.8, .8, 1)
}
85% {
-webkit-transform:scale3d(1.1, 1.1, 1);
transform:scale3d(1.1, 1.1, 1)
}
100% {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@-webkit-keyframes anim-moema-2 {
to {
opacity:0;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}
@keyframes anim-moema-2 {
to {
opacity:0;
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
}

/* 悬浮六  */


.btnEffect6 {
	position: relative;
	border-bottom: 4px solid #ff339a;    
	color: #fff;
	overflow: hidden
}
.btnEffect6 .btnbg-x {
	position: absolute;
	background: #fff;
	opacity: .2;
*filter:alpha(opacity=20);
	filter: alpha(opacity=20);
	left: 0;
	top: 0;
	right: 0;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.btnEffect6:hover .btnbg-x {
	height: 0
}