4.5K views
CSSAdd prefixes
1button { 2 position: relative; 3 font-family: inherit; 4 font-size: 18px; 5 border-radius: 40em; 6 width: 8em; 7 height: 3em; 8 z-index: 1; 9 color: white; 10 overflow: hidden; 11 border: none; 12} 13 14button .text { 15 position: absolute; 16 left: 0; 17 top: 0; 18 width: 100%; 19 height: 100%; 20 line-height: 3em; 21 border-radius: 40em; 22 border: none; 23 background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25)); 24 z-index: 1; 25 backdrop-filter: blur(10px); 26 -webkit-backdrop-filter: blur(10px); 27} 28 29button .blob { 30 position: absolute; 31 z-index: -1; 32 border-radius: 5em; 33 width: 5em; 34 height: 3em; 35 transition: transform .3s ease-in-out, background .3s ease-in-out; 36} 37 38button .blob:nth-child(2) { 39 left: 0em; 40 top: 0; 41 background: #ff930f; 42} 43 44button .blob:nth-child(3) { 45 left: 1.8em; 46 top: 0; 47 z-index: -1; 48 background: #bf0fff; 49} 50 51button .blob:nth-child(4) { 52 left: 4em; 53 top: -1em; 54 background: #ff1b6b; 55} 56 57button .blob:nth-child(5) { 58 left: 4.3em; 59 top: 1.6em; 60 background: #0061ff; 61} 62 63button:hover .blob:nth-child(2) { 64 background: #0061ff; 65} 66 67button:hover .blob:nth-child(3) { 68 background: #ff1b6b; 69} 70 71button:hover .blob:nth-child(4) { 72 background: #bf0fff; 73} 74 75button:hover .blob:nth-child(5) { 76 background: #ff930f; 77} 78 79button:hover .blob { 80 transform: scale(1.3); 81} 82 83button:active { 84 border: 2px solid white; 85} 86 87 88 89
HTML
1<button> <span class="text">Button</span> 2 <span class="blob"></span> 3 <span class="blob"></span> 4 <span class="blob"></span> 5 <span class="blob"></span> 6</button>