| @@ -1,0 +1,41 @@ | ||
| 1 | +.king-addons-pulsing-button-button { | |
| 2 | + display: inline-flex; | |
| 3 | + position: relative; | |
| 4 | + align-items: center; | |
| 5 | + transition: all .3s; | |
| 6 | +} | |
| 7 | + | |
| 8 | +.king-addons-pulsing-button-button-effect-ripple:before { | |
| 9 | + content: ''; | |
| 10 | + display: inline-block; | |
| 11 | + position: absolute; | |
| 12 | + top: -2px; | |
| 13 | + left: -2px; | |
| 14 | + bottom: -2px; | |
| 15 | + right: -2px; | |
| 16 | + border-radius: inherit; | |
| 17 | + border: 1px solid #000000; | |
| 18 | + animation: king-addons-pulsing-button-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite; | |
| 19 | +} | |
| 20 | + | |
| 21 | +@keyframes king-addons-pulsing-button-ripple { | |
| 22 | + 0% { | |
| 23 | + border-width: 4px; | |
| 24 | + transform: scale(1); | |
| 25 | + } | |
| 26 | + 80% { | |
| 27 | + border-width: 1px; | |
| 28 | + transform: scale(1.35); | |
| 29 | + } | |
| 30 | + 100% { | |
| 31 | + opacity: 0; | |
| 32 | + } | |
| 33 | +} | |
| 34 | + | |
| 35 | +.king-addons-pulsing-button-button-wrap { | |
| 36 | + display: inline-flex; | |
| 37 | +} | |
| 38 | + | |
| 39 | +.king-addons-pulsing-button-icon-reverse { | |
| 40 | + flex-flow: row-reverse; | |
| 41 | +} | |
