html圖片按鈕&按鈕點選效果
阿新 • • 發佈:2018-11-05
} /** * 按鈕樣式 */ /* 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">
使用效果如下圖所示: