Button by FColombati
This button was created for Keyboard Button Replica
#212121
1.body { 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 align-items: center; 6 min-height: 100%; 7} 8.bluetooth-button { 9 position: relative; 10 display: flex; 11 justify-content: center; 12 align-items: center; 13 width: 120px; 14 height: 120px; 15 padding: 8px 8px; 16 border-radius: 20px; 17 background: linear-gradient(180deg, #282828, #202020); 18 box-shadow: 19 inset -8px 0 8px rgba(0, 0, 0, 0.15), 20 inset 0 -8px 8px rgba(0, 0, 0, 0.25), 21 0 0 0 3px rgba(0, 0, 0, 0.75), 22 10px 20px 25px rgba(0, 0, 0, 0.4); 23 overflow: hidden; 24} 25.bluetooth-button::before { 26 content: ""; 27 position: absolute; 28 top: 20px; 29 left: 20px; 30 bottom: 20px; 31 right: 20px; 32 background: linear-gradient(180deg, #232323, #4a4a4a); 33 border-radius: 15px; 34 box-shadow: 35 -5px -5px 10px rgba(255, 255, 255, 0.25), 36 10px 5px 10px rgba(0, 0, 0, 0.15); 37 border-left: 1px solid #0004; 38 border-bottom: 1px solid #0004; 39 border-top: 1px solid #0009; 40} 41 42.i { 43 position: relative; 44} 45 46.led { 47 width: 8px; 48 height: 8px; 49 background-color: #007bff; /* Blue color */ 50 border-radius: 50%; 51 position: relative; 52 bottom: -15px; 53 opacity: 0.9; 54 box-shadow: 55 0 -15px 20px 10px rgba(0, 123, 255, 1), 56 /* Glow effect */ 0 0 20px rgba(0, 123, 255, 0.6); /* Additional glow */ 57 transition: box-shadow 0.3s ease; 58} 59 60.path { 61 transition: stroke 0.3s ease; 62} 63.circle { 64 transition: fill 0.3s ease; 65} 66 67.bluetooth-button:hover { 68 cursor: pointer; 69} 70 71.container:hover ~ .led { 72 box-shadow: 73 0 -15px 30px 10px rgba(0, 123, 255, 1), 74 /* Glow effect */ 0 0 20px rgba(0, 123, 255, 0.6); /* Additional glow */ 75} 76.container:hover circle { 77 fill: #007bff; 78} 79.container:hover path { 80 stroke: #007bff; 81} 82
55 views
MIT License