html图片按钮&按钮点击效果

}
			/**
			 * 按钮样式
			 */
			/* Radomir */
			
			.ripple {
				position: relative;
				/*//隐藏溢出的径向渐变背景*/
				overflow: hidden;
			}
			
			.ripple:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				/*//设置径向渐变*/
				background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(10, 10);
				opacity: 0;
				transition: transform .3s, opacity .5s;
			}
			
			.ripple:active:after {
				transform: scale(0, 0);
				opacity: .3;
				/*//设置初始状态*/
				transition: 0s;
			}
			.btn-sign{
				border-width:0px;
				background:url(../../image/icon-index-user.png) no-repeat 0 0;
				 width: 80px;
				 height: 80px;
			}
-------------------------
	
<button class="btn-sign btn btn-default ripple btn-lg">

使用效果如下图所示：