#e8e8e8
1.btn { 2 outline: 0; 3 display: inline-flex; 4 align-items: center; 5 justify-content: space-between; 6 background: #40B3A2; 7 min-width: 200px; 8 border: 0; 9 border-radius: 4px; 10 box-shadow: 0 4px 12px rgba(0, 0, 0, .1); 11 box-sizing: border-box; 12 padding: 16px 20px; 13 color: #fff; 14 font-size: 12px; 15 font-weight: 600; 16 letter-spacing: 1.2px; 17 text-transform: uppercase; 18 overflow: hidden; 19 cursor: pointer; 20} 21 22.btn:hover { 23 opacity: .95; 24} 25 26.btn .animation { 27 border-radius: 100%; 28 animation: ripple 0.6s linear infinite; 29} 30 31@keyframes ripple { 32 0% { 33 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1); 34 } 35 36 100% { 37 box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1), 0 0 0 80px rgba(255, 255, 255, 0); 38 } 39}
1.9K views
1.9K views
Comments
MIT License