پیشنمایش زنده
کد HTML
<button class="bluetooth-button">
<div class="bluetooth-icon">
<svg stroke="#000000" fill="none" viewBox="0 0 24 24">
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#ffffff"
d="M7 17L17 7L12 2V22L17 17L7 7"
></path>
</g>
</svg>
</div>
<div class="led-light"></div>
</button>
کد CSS
.bluetooth-button {
position: relative;
width: 90px;
height: 90px;
background: none;
border: 2px solid rgb(0, 255, 255);
border-radius: 50%;
box-shadow:
inset 0 0 10px rgba(0, 255, 255, 0.4),
3px 3px 10px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition:
border 0.3s ease,
transform 0.3s ease,
background 0.2s ease;
}
.bluetooth-button:hover {
border-color: #00e1ff;
transform: scale(1.05);
}
.bluetooth-button:active {
transform: scale(0.95);
background: rgba(0, 225, 255, 0.1);
}
.bluetooth-icon svg {
width: 30px;
height: 30px;
stroke: #00e1ff;
fill: none;
}
.led-light {
position: absolute;
bottom: 10px;
width: 10px;
height: 10px;
background-color: #00e1ff;
border-radius: 50%;
box-shadow:
0 0 8px rgba(0, 225, 255, 0.8),
0 0 16px rgba(0, 225, 255, 0.6),
0 0 24px rgba(0, 225, 255, 0.4);
}