Button by SelfMadeSystem
#e8e8e8
1/* Note the transparent background :) */ 2.btn { 3 border-radius: 0.5em; 4 font-size: larger; 5 height: 3em; 6 width: 8em; 7 position: relative; 8 border: none; 9 background-color: transparent; 10 isolation: isolate; 11} 12 13.btn > span { 14 position: relative; 15 pointer-events: none; 16} 17 18.ripple-container { 19 position: absolute; 20 inset: -0.3em; 21 display: grid; 22 grid-template-columns: repeat(16, 0.5em); 23 border-radius: 0.8em; 24 padding: 0.3em; 25 mask: linear-gradient(#fff 0 0) content-box, 26 linear-gradient(#fff 0 0); 27 /* I forgor that I need the two mask composites because of firefoxxxxxx */ 28 mask-composite: exclude; 29 mask-composite: xor; 30 -webkit-mask: linear-gradient(#fff 0 0) content-box, 31 linear-gradient(#fff 0 0); 32 -webkit-mask-composite: exclude; 33 -webkit-mask-composite: xor; 34 overflow: hidden; 35} 36 37.ripple-container > span { 38 position: relative; 39 display: flex; 40 justify-content: center; 41 align-items: center; 42} 43 44.ripple-container > span::after { 45 content: ""; 46 pointer-events: none; 47 position: absolute; 48 background-color: hsl(218, 68%, 65%); 49 transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s; 50 width: 18em; 51 height: 18em; 52 opacity: 0; 53 border-radius: 999em; 54} 55 56.ripple-container > span:active::after { 57 transition: 0s; 58 width: 0em; 59 height: 0em; 60 opacity: 1; 61} 62 63.ripple-container::before { 64 content: ""; 65 pointer-events: none; 66 position: absolute; 67 background-color: hsla(218, 68%, 65%, 0.5); 68 width: 13em; 69 height: 13em; 70 border-radius: 999em; 71 transition: transform 0.25s ease-out; 72 transform: translate(-25%, -25%) scale(0); 73} 74 75.ripple-container:hover::before { 76 transform: translate(-25%, -25%) scale(1); 77} 78
811 views
811 views
MIT License