پیشنمایش زنده
کد HTML
<div class="card">
<ul
class="list"
style="--color:#5353ff;--hover-storke:#fff; --hover-color:#fff"
>
<li class="element">
<label for="rename">
<input type="radio" id="rename" name="filed" checked="" />
<svg
class="lucide lucide-pencil"
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#7e8590"
fill="none"
viewBox="0 0 24 24"
height="25"
width="25"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path>
</svg>
Rename</label
>
</li>
<li class="element" style="--color:#5353ff">
<label class="label" for="addmember">
<input type="radio" id="addmember" name="filed" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#7e8590"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-user-round-plus"
>
<path d="M2 21a8 8 0 0 1 13.292-6"></path>
<circle cx="10" cy="8" r="5"></circle>
<path d="M19 16v6"></path>
<path d="M22 19h-6"></path>
</svg>
Add Member</label
>
</li>
<div class="separator"></div>
<li class="element" style="--color:#5353ff">
<label for="settings">
<input type="radio" id="settings" name="filed" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#7e8590"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-settings"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
Settings</label
>
</li>
<li class="element delete" style="--color:#8e2a2a">
<label for="delete">
<input type="radio" id="delete" name="filed" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#7e8590"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash-2"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
Delete</label
>
</li>
<div class="separator"></div>
<li
class="element"
style="--color:rgba(56, 45, 71, 0.836);--hover-storke:#bd89ff;--hover-color:#bd89ff"
>
<label for="teamaccess">
<input type="radio" id="teamaccess" name="filed" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#7e8590"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-users-round"
>
<path d="M18 21a8 8 0 0 0-16 0"></path>
<circle cx="10" cy="8" r="5"></circle>
<path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"></path>
</svg>
Team Access</label
>
</li>
</ul>
</div>
کد CSS
.card {
width: 200px;
background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(
139deg,
rgba(36, 40, 50, 1) 0%,
rgba(36, 40, 50, 1) 0%,
rgba(37, 28, 40, 1) 100%
);
user-select: none;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.card .list .element label input[type="radio"] {
display: none;
}
.card .separator {
border-top: 1.5px solid #42434a;
}
.card .list {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 0px;
}
.card .list .element > label {
display: flex;
align-items: center;
color: #7e8590;
gap: 10px;
transition: all 0.3s ease-out;
padding: 6px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.card .list .element label svg {
width: 19px;
height: 19px;
transition: all 0.3s ease-out;
}
.card .list .element label:has(input[type="radio"]:checked),
.card .list .element label:hover {
background-color: var(--color);
color: var(--hover-color);
}
.card .list .element label:active {
transform: scale(0.96);
}
.card .list .element label:has(input[type="radio"]:checked) svg,
.card .list .element label:hover svg {
stroke: var(--hover-storke);
}