#212121
1.light-button button.bt { 2 position: relative; 3 height: 200px; 4 display: flex; 5 align-items: flex-end; 6 outline: none; 7 background: none; 8 border: none; 9} 10 11.light-button button.bt .button-holder { 12 display: flex; 13 flex-direction: column; 14 align-items: center; 15 justify-content: center; 16 height: 100px; 17 width: 100px; 18 background-color: #0a0a0a; 19 border-radius: 5px; 20 color: #0f0f0f; 21 font-weight: 700; 22 transition: 300ms; 23 outline: #0f0f0f 2px solid; 24 outline-offset: 20; 25} 26 27.light-button button.bt .button-holder svg { 28 height: 50px; 29 fill: #0f0f0f; 30 transition: 300ms; 31} 32 33.light-button button.bt .light-holder { 34 position: absolute; 35 height: 200px; 36 width: 100px; 37 display: flex; 38 flex-direction: column; 39 align-items: center; 40} 41 42.light-button button.bt .light-holder .dot { 43 position: absolute; 44 top: 0; 45 width: 10px; 46 height: 10px; 47 background-color: #0a0a0a; 48 border-radius: 10px; 49 z-index: 2; 50} 51 52.light-button button.bt .light-holder .light { 53 position: absolute; 54 top: 0; 55 width: 200px; 56 height: 200px; 57 clip-path: polygon(50% 0%, 25% 100%, 75% 100%); 58 background: transparent; 59} 60 61.light-button button.bt:hover .button-holder svg { 62 fill: rgba(88, 101, 242, 1); 63} 64 65.light-button button.bt:hover .button-holder { 66 color: rgba(88, 101, 242, 1); 67 outline: rgba(88, 101, 242, 1) 2px solid; 68 outline-offset: 2px; 69} 70 71.light-button button.bt:hover .light-holder .light { 72 background: rgb(255, 255, 255); 73 background: linear-gradient(180deg, rgba(88, 101, 242, 1) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); 74}
6.8K views
6.8K views
Comments
Variations
2Ahmedkamel-1
76 views
MIT License