#212121
1.button { 2 position: relative; 3 padding: 10px 22px; 4 border-radius: 6px; 5 border: none; 6 color: #fff; 7 cursor: pointer; 8 background-color: #7d2ae8; 9 transition: all 0.2s ease; 10} 11 12.button:active { 13 transform: scale(0.96); 14} 15 16.button:before, 17.button:after { 18 position: absolute; 19 content: ""; 20 width: 150%; 21 left: 50%; 22 height: 100%; 23 transform: translateX(-50%); 24 z-index: -1000; 25 background-repeat: no-repeat; 26} 27 28.button:hover:before { 29 top: -70%; 30 background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), 31 radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%), 32 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 33 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 34 radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), 35 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 36 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 37 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 38 radial-gradient(circle, #7d2ae8 20%, transparent 20%); 39 background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 40 10% 10%, 18% 18%; 41 background-position: 50% 120%; 42 animation: greentopBubbles 0.6s ease; 43} 44 45@keyframes greentopBubbles { 46 0% { 47 background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 48 40% 90%, 55% 90%, 70% 90%; 49 } 50 51 50% { 52 background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 53 50% 50%, 65% 20%, 90% 30%; 54 } 55 56 100% { 57 background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 58 50% 40%, 65% 10%, 90% 20%; 59 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; 60 } 61} 62 63.button:hover::after { 64 bottom: -70%; 65 background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%), 66 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 67 radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%), 68 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 69 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 70 radial-gradient(circle, #7d2ae8 20%, transparent 20%), 71 radial-gradient(circle, #7d2ae8 20%, transparent 20%); 72 background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; 73 background-position: 50% 0%; 74 animation: greenbottomBubbles 0.6s ease; 75} 76 77@keyframes greenbottomBubbles { 78 0% { 79 background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 80 70% -10%, 70% 0%; 81 } 82 83 50% { 84 background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 85 105% 0%; 86 } 87 88 100% { 89 background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 90 110% 10%; 91 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; 92 } 93}
5.8K views
5.8K views
Comments
Variations
3 MIT License