پیشنمایش زنده
کد HTML
<div class="gender-card">
<div class="large-svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 50 90"
class="largemalesvg"
height="90"
width="50"
>
<circle stroke-width="6" stroke="#76E3FE" r="22" cy="25" cx="25"></circle>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M25 47L25 87"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M25 86.6958L38.6958 73"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M11 73L24.6958 86.6958"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 50 90"
class="largefemalesvg"
height="90"
width="50"
>
<circle stroke-width="6" stroke="#F57CB3" r="22" cy="25" cx="25"></circle>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#F57CB3"
d="M25 47L25 87"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#F57CB3"
d="M12 73H38"
></path>
</svg>
</div>
<form action="#">
<p class="heading">What's your gender?</p>
<div class="radio-wrapper">
<input
class="gender-radio-buttons"
id="male"
value="male"
name="gender"
type="radio"
/>
<label class="genderlabel malebutton" for="male">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 50 90"
class="smallsvg malesmallsvg"
>
<circle
stroke-width="6"
stroke="#76E3FE"
r="22"
cy="25"
cx="25"
></circle>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M25 47L25 87"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M25 86.6958L38.6958 73"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#76E3FE"
d="M11 73L24.6958 86.6958"
></path></svg
>Male
</label>
<input
class="gender-radio-buttons"
id="female"
value="female"
name="gender"
type="radio"
/>
<label class="genderlabel femalebutton" for="female">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 50 90"
class="smallsvg"
>
<circle
stroke-width="6"
stroke="#F57CB3"
r="22"
cy="25"
cx="25"
></circle>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#F57CB3"
d="M25 47L25 87"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#F57CB3"
d="M12 73H38"
></path></svg
>Female
</label>
<input
class="gender-radio-buttons"
id="other"
value="other"
name="gender"
type="radio"
/>
<label class="genderlabel otherbutton" for="other">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 78 75"
class="smallsvg other-gender"
>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M73.4657 16.6983L48.2159 16.6984L19.9816 58.0001L2.99911 58"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M73.1641 16.698L59.4705 2.99992"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M59.4648 30.696L73.1629 17.0024"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M74.022 57.8121L51.1697 57.8121L19.9997 16.9999L3 17"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M73.748 57.8123L61.3547 71.51"
></path>
<path
stroke-linecap="round"
stroke-width="6"
stroke="#9B4AED"
d="M61.3496 43.8147L73.747 57.5079"
></path>
</svg>
Other
</label>
</div>
</form>
</div>
کد CSS
.gender-card {
width: fit-content;
height: fit-content;
background-color: rgb(255, 255, 255);
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
padding: 30px;
border-radius: 20px;
font-family: Arial, Helvetica, sans-serif;
gap: 25px;
}
.large-svg-container {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.largemalesvg {
transform: rotate(180deg);
}
.heading {
color: #1d1d1d;
font-weight: 600;
font-size: 25px;
text-align: center;
}
.gender-radio-buttons {
display: none;
}
.smallsvg {
width: 10px;
}
.other-gender {
width: 15px;
}
.malesmallsvg {
transform: rotate(225deg);
}
.genderlabel {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: fit-content;
background-color: rgb(46, 46, 46);
border-radius: 5px;
padding: 8px 16px;
gap: 8px;
color: white;
cursor: pointer;
transition: all 0.3s ease-out;
}
.radio-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 25px;
}
.femalebutton:hover {
background-color: rgb(245, 185, 195);
}
.malebutton:hover {
background-color: #569fcf;
}
.otherbutton:hover {
background-color: #4d227a;
}
#female:checked + .femalebutton {
background-color: rgb(245, 185, 195);
transform: scale(1.1);
}
#male:checked + .malebutton {
background-color: #569fcf;
transform: scale(1.1);
}
#other:checked + .otherbutton {
background-color: #4d227a;
transform: scale(1.2);
}