پیشنمایش زنده
کد HTML
<div class="preference-group">
<div class="font-size-selector">
<button class="font-btn" data-size="small">A</button>
<button class="font-btn active" data-size="medium">A</button>
<button class="font-btn" data-size="large">A</button>
</div>
</div>
کد CSS
.font-size-selector {
display: flex;
gap: 8px;
}
.font-btn {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
font-family: Georgia, serif;
}
.font-btn:nth-child(1) {
font-size: 0.85rem;
}
.font-btn:nth-child(2) {
font-size: 1.1rem;
}
.font-btn:nth-child(3) {
font-size: 1.4rem;
}
.font-btn:hover {
background: rgba(74, 144, 226, 0.1);
border-color: rgba(74, 144, 226, 0.3);
color: #fff;
}
.font-btn.active {
background: rgba(74, 144, 226, 0.2);
border-color: rgba(74, 144, 226, 0.5);
color: #fff;
}
/* Theme Options */
.theme-options {
display: flex;
gap: 10px;
}
.theme-btn {
width: 52px;
height: 52px;
border-radius: 12px;
border: 2px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.theme-btn svg {
width: 24px;
height: 24px;
}
.theme-btn[data-theme="light"] {
background: #f5f5f5;
color: #333;
}
.theme-btn[data-theme="dark"] {
background: #1a1f2e;
color: #fff;
}
.theme-btn[data-theme="sepia"] {
background: #f4ecd8;
color: #5c4b37;
}
.theme-btn:hover {
transform: scale(1.05);
}
.theme-btn.active {
border-color: #4a90e2;
box-shadow: 0 0 16px rgba(74, 144, 226, 0.3);
}