Button by omriluz
#e8e8e8
1.button { 2 background: none; 3 border: none; 4} 5 6.button .bloom-container { 7 position: relative; 8 transition: all 0.2s ease-in-out; 9 border: none; 10 background: none; 11} 12 13.button .bloom-container .button-container-main { 14 width: 110px; 15 aspect-ratio: 1; 16 border-radius: 50%; 17 overflow: hidden; 18 position: relative; 19 display: grid; 20 place-content: center; 21 border-right: 5px solid white; 22 border-left: 5px solid rgba(128, 128, 128, 0.147); 23 transform: rotate(-20deg); 24 transition: all 0.5s ease-in-out; 25} 26 27.button .bloom-container .button-container-main .button-inner { 28 height: 60px; 29 aspect-ratio: 1; 30 border-radius: 50%; 31 position: relative; 32 box-shadow: rgba(100, 100, 111, 0.5) -10px 5px 10px 0px; 33 transition: all 0.5s ease-in-out; 34} 35 36.button .bloom-container .button-container-main .button-inner .back { 37 position: absolute; 38 inset: 0; 39 border-radius: 50%; 40 background: linear-gradient( 41 60deg, 42 rgb(245, 255, 255) 0%, 43 rgb(185, 225, 200) 100% 44 ); 45} 46 47.button .bloom-container .button-container-main .button-inner .front { 48 position: absolute; 49 inset: 5px; 50 border-radius: 50%; 51 background: linear-gradient(60deg, rgb(0, 0, 0)); 52 display: grid; 53 place-content: center; 54 transform: rotate(20deg); 55} 56 57.button .bloom-container .button-container-main .button-inner .front .svg { 58 fill: #ffffff; 59 opacity: 0.5; 60 width: 30px; 61 aspect-ratio: 1; 62 transition: all 0.2s ease-in; 63} 64 65.button .bloom-container .button-container-main .button-glass { 66 position: absolute; 67 inset: 0; 68 background: linear-gradient( 69 90deg, 70 rgba(255, 255, 255, 0) 0%, 71 rgba(255, 255, 255, 0.888) 100% 72 ); 73 transform: translate(0%, -50%) rotate(0deg); 74 transform-origin: bottom center; 75 transition: all 0.5s ease-in-out; 76} 77 78.button .bloom-container .bloom { 79 height: 1px; 80 width: 1px; 81 position: absolute; 82 background: white; 83} 84 85.button .bloom-container .bloom1 { 86 top: 10px; 87 right: 20px; 88 box-shadow: rgb(255, 255, 255) 0px 0px 10px 10px, 89 rgb(255, 255, 255) 0px 0px 20px 20px; 90} 91 92.button .bloom-container .bloom2 { 93 bottom: 10px; 94 left: 20px; 95 box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px 10px, 96 rgba(255, 255, 255, 0.5) 0px 0px 30px 20px; 97} 98 99.button .bloom-container:hover { 100 transform: scale(1.1); 101} 102 103.button .bloom-container:hover .button-container-main .button-glass { 104 transform: translate(0%, -40%); 105} 106 107.button 108 .bloom-container:hover 109 .button-container-main 110 .button-inner 111 .front 112 .svg { 113 opacity: 1; 114 filter: drop-shadow(0 0 10px white); 115} 116 117.button .bloom-container:active { 118 transform: scale(0.7); 119} 120 121.button .bloom-container:active .button-container-main .button-inner { 122 transform: scale(1.2); 123} 124
377 views
Variation of abutton
MIT License