.icon-button-component{
	display: inline-block;
	//通用深色背景文字
	.icon-btn-common-style{
		text-align:center;
		min-width: 0;
		cursor:pointer;
		color: #fff;
		background-color: $C3;
		height:26px;
		width:26px;
		line-height:26px;
		/*margin: 10px 0;*/
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.3s;
		border-radius:2px;
		float:left;
		-webkit-user-select: none;
		&:hover{
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
			transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.3s;
		}
	}
	//灰色按钮 
	.icon-btns-bg-gray{
		@extend .icon-btn-common-style;
		background-repeat: no-repeat;
		-webiconkit-user-select: none;
		box-shadow: none;
		cursor:not-allowed;
		&:hover{
			box-shadow:none;
		}
	}
	//默认灰色
	.icon-btns-bg-gray-defalult{
		@extend .icon-btns-bg-gray;
		color:#D5E9F8;
		background-color: #9FCFF1;
	}
	//弱化灰色
	.icon-btns-bg-gray-weaken{
		@extend .icon-btns-bg-gray;
		color: #C1C7CB !important;
	}
	//弱化按钮
	.icon-btns-weaken{
		@extend .icon-btn-common-style;
		color: $M2;
		background-color: $M5;
		background-repeat: no-repeat;
	}
	//按钮波纹效果样式
	.icon-bg-ripple{
		position:relative;
		overflow:hidden;
		z-index:6;
		.ripple{
			display:block;
			position: absolute;
			border:0 solid rgba(0,0,0,0.2);
			border-radius:50%!important;
			opacity:.3;
			pointer-events:none;
			opacity:1;
		}
		&:before{
			font-size: 18px;
		};
	}
	.icon-bg-ripple-active{
		.ripple{
			z-index: -1;
			border-width:150px;
			margin-top:-150px;
			margin-left:-150px;
			opacity:0;
			transition:border-width 1s,margin-top 1s,margin-left 1s,opacity 1s;
		}
	}
}
/****************************************通用按钮结束*********************************/