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