180 views
CSSAdd prefixes
1.my-button { 2 background-color: blueviolet; 3 border: none; 4 color: white; 5 padding: 10px 20px; 6 text-align: center; 7 text-decoration: none; 8 display: inline-block; 9 font-size: 16px; 10 border-radius: 5px; 11 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); 12 position: relative; 13 overflow: hidden; 14} 15 16.my-button:after { 17 content: ""; 18 background-color: rgba(255, 255, 255, 0.2); 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 width: 5px; 23 height: 5px; 24 border-radius: 50%; 25 transform: translate(-50%, -50%); 26 opacity: 0; 27} 28 29.my-button:hover:after { 30 animation: ripple_401 1s ease-out; 31} 32 33@keyframes ripple_401 { 34 0% { 35 width: 5px; 36 height: 5px; 37 opacity: 1; 38 } 39 40 100% { 41 width: 200px; 42 height: 200px; 43 opacity: 0; 44 } 45} 46
HTML
1<button class="my-button"> 2 Click me! 3</button> 4