Button by Roopaish
#e8e8e8
1button { 2 outline: none; 3 border: none; 4 cursor: pointer; 5 padding: 10px 20px; 6 font-size: 12px; 7 font-weight: 700; 8 color: hsl(0, 0%, 100%); 9 border-radius: 10px; 10 text-transform: uppercase; 11 transition: all 0.2s ease-in-out; 12 position: relative; 13 background-color: #ff0081; 14 box-shadow: rgba(233, 30, 99, 0.5); 15} 16 17button::after, 18button::before { 19 transition: all 0.2s ease-in-out; 20} 21 22button::before { 23 z-index: -1; 24 position: absolute; 25 content: ""; 26 left: -2em; 27 right: -2em; 28 top: -2em; 29 bottom: -2em; 30 background-repeat: no-repeat; 31 background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), 32 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 33 radial-gradient(circle, transparent 10%, white 20%, transparent 20%), 34 radial-gradient(circle, #ff0081 20%, transparent 20%), 35 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 36 radial-gradient(circle, #ff0081 20%, transparent 20%), 37 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 38 radial-gradient(circle, #ff0081 20%, transparent 20%), 39 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 40 /* */ 41 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 42 radial-gradient(circle, #ff0081 20%, transparent 20%), 43 radial-gradient(circle, transparent 10%, white 20%, transparent 20%), 44 radial-gradient(circle, #ff0081 20%, transparent 20%), 45 radial-gradient(circle, transparent 10%, #ff0081 20%, transparent 20%), 46 radial-gradient(circle, #ff0081 20%, transparent 20%), 47 radial-gradient(circle, transparent 10%, white 20%, transparent 20%); 48 background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 49 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 50 20% 20%; 51 background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 52 65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 53 64% 70%, 80% 71%; 54} 55 56button:hover::before { 57 background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 58 100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 59 100% 100%; 60 background-size: 0% 0%; 61 transition: background-position 0.5s ease-in-out, 62 background-size 0.75s ease-in-out; 63}
951 views
951 views
MIT License