87 views
CSS
1.btn { 2 font-size: larger; 3 height: 3em; 4 width: 8em; 5 position: relative; 6 border: none; 7 isolation: isolate; 8} 9 10.btn > span { 11 position: absolute; 12 border-radius: 0.5em; 13 pointer-events: none; 14 inset: 0; 15 background-color: hsl(218, 68%, 52%); 16 color: white; 17 box-shadow: 1px 2px 4px #0007; 18 z-index: 10; 19 display: flex; 20 justify-content: center; 21 align-items: center; 22} 23 24.ripple-container { 25 position: absolute; 26 inset: -0.3em; 27 display: grid; 28 grid-template-columns: repeat(16, 0.5em); 29 border-radius: 0.8em; 30 padding: 0.3em; 31 overflow: hidden; 32} 33 34.ripple-container > span { 35 position: relative; 36 display: flex; 37 justify-content: center; 38 align-items: center; 39} 40 41.ripple-container > span::after { 42 content: ""; 43 pointer-events: none; 44 position: absolute; 45 background-color: hsl(218, 68%, 65%); 46 transition: width 0.5s ease-out, height 0.5s ease-out, opacity 1s; 47 width: 18em; 48 height: 18em; 49 opacity: 0; 50 border-radius: 999em; 51} 52 53.ripple-container > span:active::after { 54 transition: 0s; 55 width: 0em; 56 height: 0em; 57 opacity: 1; 58} 59 60.ripple-container::before { 61 content: ""; 62 pointer-events: none; 63 position: absolute; 64 background-color: hsla(218, 68%, 65%, 0.5); 65 width: 13em; 66 height: 13em; 67 border-radius: 999em; 68 transition: transform 0.25s ease-out; 69 transform: translate(-25%, -25%) scale(0); 70} 71 72.ripple-container:hover::before { 73 transform: translate(-25%, -25%) scale(1); 74} 75
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>