پیشنمایش زنده
کد HTML
<div class="package-container">
<div class="package-heading">Please Choose a Package</div>
<div class="package-tab-wrapper">
<input
type="radio"
name="plan"
value="daily"
id="daily"
class="input"
checked=""
/>
<label for="daily" class="package-tab"> Daily </label>
<input type="radio" name="plan" value="weekly" id="weekly" class="input" />
<label for="weekly" class="package-tab"> Weekly </label>
<input
type="radio"
name="plan"
value="monthly"
id="monthly"
class="input"
/>
<label for="monthly" class="package-tab"> Monthly </label>
</div>
</div>
کد CSS
.package-container {
display: flex;
flex-direction: column;
row-gap: 16px;
font-family: "Poppins", sans-serif;
--primary-color: #1da1f2;
--secondary-color: #1da1f2;
--tab-text-color: #ffffff;
}
.package-heading {
font-size: 16px;
font-weight: 500;
color: var(--tab-text-color);
}
.package-tab-wrapper {
display: flex;
align-items: center;
column-gap: 10px;
border-radius: 8px;
border: 1px solid var(--primary-color);
padding: 8px;
}
.package-tab-wrapper .input {
display: none;
}
.package-tab {
flex-grow: 1;
text-align: center;
padding: 8px 16px;
border-radius: 8px;
font-size: 12px;
background: var(--tab-text-color);
color: var(--secondary-color);
font-weight: 600;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.package-tab:active {
transform: scale(0.9);
}
.input:checked + label.package-tab {
background: var(--primary-color);
color: var(--tab-text-color);
box-shadow: 0px 0px 10px 0px var(--primary-color);
}