#212121
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.label { 8 position: relative; 9 margin: 0 10px; 10 cursor: pointer; 11} 12 13.button { 14 position: relative; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 width: 40px; 19 height: 40px; 20 border-radius: 50%; 21 background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%); 22 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 23 transition: all 0.3s ease; 24} 25 26.button::before, 27.button::after { 28 content: ""; 29 position: absolute; 30 width: 100%; 31 height: 100%; 32 border-radius: 50%; 33 transition: all 0.3s ease; 34} 35 36.button::before { 37 background-color: rgba(255, 255, 255, 0.15); 38 transform: scale(0.9); 39 opacity: 0; 40} 41 42.button::after { 43 background-color: rgba(0, 0, 0, 0.1); 44 transform: scale(1.1); 45 opacity: 0; 46} 47 48.label input { 49 display: none; 50} 51 52.label input:checked + .button { 53 background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%); 54 box-shadow: 0 10px 20px rgba(255, 87, 34, 0.4); 55} 56 57.label input:checked + .button::before { 58 transform: scale(1.2); 59 opacity: 1; 60} 61 62.label input:checked + .button::after { 63 animation: pulse 1.5s infinite; 64} 65 66@keyframes pulse { 67 0% { 68 transform: scale(1.1); 69 opacity: 1; 70 } 71 72 50% { 73 transform: scale(1.5); 74 opacity: 0; 75 } 76 77 100% { 78 transform: scale(1.1); 79 opacity: 1; 80 } 81} 82 83.shadow { 84 position: absolute; 85 bottom: 5px; 86 width: 100%; 87 height: 10px; 88 border-radius: 50%; 89 background-color: rgba(0, 0, 0, 0.2); 90} 91 92.front { 93 position: relative; 94 z-index: 1; 95} 96
1.4K views
1.4K views
Comments
MIT License