پیشنمایش زنده
کد HTML
<div class="icon-btn-container">
<button class="icon-btn icon-btn-red">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.1716 8.00003L1.08582 3.91424L3.91424 1.08582L8.00003 5.1716L12.0858 1.08582L14.9142 3.91424L10.8285 8.00003L14.9142 12.0858L12.0858 14.9142L8.00003 10.8285L3.91424 14.9142L1.08582 12.0858L5.1716 8.00003Z"
fill="#FFFFFF"
></path>
</svg>
</button>
<button class="icon-btn icon-btn-green">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.4141 4.91424L5.99991 14.3285L0.585693 8.91424L3.41412 6.08582L5.99991 8.6716L12.5857 2.08582L15.4141 4.91424Z"
fill="#ffffff"
></path>
</svg>
</button>
</div>
کد CSS
.icon-btn-container {
position: relative;
display: flex;
gap: 10px;
}
.icon-btn {
font-size: 2.4rem;
text-align: center;
width: 65px;
height: 65px;
border-radius: 50%;
color: #ffffff;
border: 5px solid #fff;
transition: all 0.3s ease;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
}
.icon-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.icon-btn-red {
background-color: #f73a45;
box-shadow: 0px 0px 5px #f73a45;
}
.icon-btn-green {
background-color: #3eac21;
box-shadow: 0px 0px 5px #3eac21;
}
.icon-btn-green svg,
.icon-btn-red svg {
width: 35px;
height: 35px;
}