Button by SelfMadeSystem
#e8e8e8
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
857 views
857 views
MIT License