79 views
CSS
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
HTML
1<button class="btn"> 2 <span>Border ripple</span> 3 <div class="ripple-container"> 4 <span></span> 5 <span></span> 6 <span></span> 7 <span></span> 8 <span></span> 9 <span></span> 10 <span></span> 11 <span></span> 12 <span></span> 13 <span></span> 14 <span></span> 15 <span></span> 16 <span></span> 17 <span></span> 18 <span></span> 19 <span></span> 20 21 <span></span> 22 <span></span> 23 <span></span> 24 <span></span> 25 <span></span> 26 <span></span> 27 <span></span> 28 <span></span> 29 <span></span> 30 <span></span> 31 <span></span> 32 <span></span> 33 <span></span> 34 <span></span> 35 <span></span> 36 <span></span> 37 38 <span></span> 39 <span></span> 40 <span></span> 41 <span></span> 42 <span></span> 43 <span></span> 44 <span></span> 45 <span></span> 46 <span></span> 47 <span></span> 48 <span></span> 49 <span></span> 50 <span></span> 51 <span></span> 52 <span></span> 53 <span></span> 54 55 <span></span> 56 <span></span> 57 <span></span> 58 <span></span> 59 <span></span> 60 <span></span> 61 <span></span> 62 <span></span> 63 <span></span> 64 <span></span> 65 <span></span> 66 <span></span> 67 <span></span> 68 <span></span> 69 <span></span> 70 <span></span> 71 72 <span></span> 73 <span></span> 74 <span></span> 75 <span></span> 76 <span></span> 77 <span></span> 78 <span></span> 79 <span></span> 80 <span></span> 81 <span></span> 82 <span></span> 83 <span></span> 84 <span></span> 85 <span></span> 86 <span></span> 87 <span></span> 88 89 <span></span> 90 <span></span> 91 <span></span> 92 <span></span> 93 <span></span> 94 <span></span> 95 <span></span> 96 <span></span> 97 <span></span> 98 <span></span> 99 <span></span> 100 <span></span> 101 <span></span> 102 <span></span> 103 <span></span> 104 <span></span> 105 </div> 106</button>