1. 程式人生 > >html圖片按鈕&按鈕點選效果

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">

使用效果如下圖所示:
在這裡插入圖片描述
在這裡插入圖片描述