#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(-45deg); 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(60deg, rgb(1, 85, 103) 0%, rgb(147, 245, 255) 100%); 41} 42 43.button .bloom-container .button-container-main .button-inner .front { 44 position: absolute; 45 inset: 5px; 46 border-radius: 50%; 47 background: linear-gradient(60deg, rgb(0, 103, 140) 0%, rgb(58, 209, 233) 100%); 48 display: grid; 49 place-content: center; 50} 51 52.button .bloom-container .button-container-main .button-inner .front .svg { 53 fill: #ffffff; 54 opacity: 0.5; 55 width: 30px; 56 aspect-ratio: 1; 57 transform: rotate(45deg); 58 transition: all 0.2s ease-in; 59} 60 61.button .bloom-container .button-container-main .button-glass { 62 position: absolute; 63 inset: 0; 64 background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.888) 100%); 65 transform: translate(0%, -50%) rotate(0deg); 66 transform-origin: bottom center; 67 transition: all 0.5s ease-in-out; 68} 69 70.button .bloom-container .bloom { 71 height: 1px; 72 width: 1px; 73 position: absolute; 74 background: white; 75} 76 77.button .bloom-container .bloom1 { 78 top: 10px; 79 right: 20px; 80 box-shadow: rgb(255, 255, 255) 0px 0px 10px 10px, rgb(255, 255, 255) 0px 0px 20px 20px; 81} 82 83.button .bloom-container .bloom2 { 84 bottom: 10px; 85 left: 20px; 86 box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px 10px, rgba(255, 255, 255, 0.5) 0px 0px 30px 20px; 87} 88 89.button .bloom-container:hover { 90 transform: scale(1.1); 91} 92 93.button .bloom-container:hover .button-container-main .button-glass { 94 transform: translate(0%, -40%); 95} 96 97.button .bloom-container:hover .button-container-main .button-inner .front .svg { 98 opacity: 1; 99 filter: drop-shadow(0 0 10px white); 100} 101 102.button .bloom-container:active { 103 transform: scale(0.7); 104} 105 106.button .bloom-container:active .button-container-main .button-inner { 107 transform: scale(1.2); 108}
2.9K views
2.9K views
Comments
1omriluz 1. October at 12:36
1. October at 12:36
Pretty cool. Wonder how it would look with x logo
Variations
1 MIT License