Button by Pradeepsaranbishnoi
#e8e8e8
1.toggle { 2 display: inline-block; 3} 4 5.toggle { 6 position: relative; 7 height: 100px; 8 width: 100px; 9} 10 11.toggle:before { 12 box-shadow: 0; 13 border-radius: 84.5px; 14 background: #fff; 15 position: absolute; 16 margin-left: -36px; 17 margin-top: -36px; 18 opacity: 0.2; 19 height: 72px; 20 width: 72px; 21 left: 50%; 22 top: 50%; 23} 24 25.toogle input:checked~.label { 26 color: rgba(255,0,0,0.8); 27} 28 29.toggle .button { 30 transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); 31 box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2); 32 border-radius: 68.8px; 33 position: absolute; 34 background: #eaeaea; 35 margin-left: -34.4px; 36 margin-top: -34.4px; 37 display: block; 38 height: 68.8px; 39 width: 68.8px; 40 left: 50%; 41 top: 50%; 42} 43 44.toggle .label { 45 transition: color 300ms ease-out; 46 line-height: 101px; 47 text-align: center; 48 position: absolute; 49 font-weight: 700; 50 font-size: 28px; 51 display: block; 52 opacity: 0.9; 53 height: 100%; 54 width: 100%; 55 color: rgba(0, 0, 0, 0.9); 56} 57 58.toggle input { 59 opacity: 0; 60 position: absolute; 61 cursor: pointer; 62 z-index: 1; 63 height: 100%; 64 width: 100%; 65 left: 0; 66 top: 0; 67} 68 69.toggle input:active ~ .button { 70 filter: blur(0.5px); 71 box-shadow: 0 12px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6); 72} 73 74.toggle input:active ~ .label { 75 font-size: 26px; 76 color: rgba(0, 0, 0, 0.45); 77} 78 79.toggle input:checked ~ .button { 80 filter: blur(0.5px); 81 box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6); 82} 83 84.toggle input:checked ~ .label { 85 color: rgba(0, 0, 0, 0.8); 86} 87
38K views
38K views
Nagalapuramhareeswar 24. September 2023. at 13:49
24. September 2023. at 13:49
please change code like mentioned below ''' .toogle input:checked~.label{ color:rgba(255,0,0,0.8); } ''' it will look awsome after the change please consider my request towards it.
adamgiebl
Pro+
24. September 2023. at 15:1924. September 2023. at 15:19
@Nagalapuramhareeswar You can make a variation with this change
Variations
1 MIT License