پیشنمایش زنده
کد HTML
<label class="ds-label"
><span>
<input type="text" class="ds_textinput" placeholder="Username" />
<div class="ds-input-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="38px"
height="38px"
viewBox="0 0 38 38"
version="1.1"
>
<g id="surface1">
<path
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
d="M 18.933594 21.539062 C 19.546875 21.535156 20.15625 21.527344 20.789062 21.519531 C 28.1875 21.507812 28.1875 21.507812 31.039062 23.980469 C 33.105469 26.402344 33.390625 27.890625 33.316406 30.972656 C 33.3125 31.34375 33.304688 31.714844 33.300781 32.097656 C 33.289062 33.007812 33.269531 33.921875 33.25 34.832031 C 31.269531 35.425781 31.269531 35.425781 30.082031 34.832031 C 29.761719 33.097656 29.578125 31.363281 29.375 29.609375 C 29 27.839844 28.894531 27.398438 27.445312 26.390625 C 25.679688 26.144531 25.679688 26.144531 23.652344 26.179688 C 23.28125 26.175781 22.914062 26.175781 22.535156 26.175781 C 21.753906 26.171875 20.976562 26.175781 20.195312 26.183594 C 19.003906 26.191406 17.8125 26.183594 16.621094 26.171875 C 15.863281 26.171875 15.105469 26.175781 14.347656 26.179688 C 13.660156 26.179688 12.96875 26.183594 12.261719 26.183594 C 10.585938 26.25 10.585938 26.25 9.550781 27.089844 C 8.640625 28.476562 8.554688 29.871094 8.34375 31.5 C 8.261719 32.125 8.179688 32.746094 8.09375 33.386719 C 8.035156 33.863281 7.976562 34.34375 7.917969 34.832031 C 5.9375 35.425781 5.9375 35.425781 4.75 34.832031 C 4.691406 33.578125 4.652344 32.328125 4.617188 31.074219 C 4.601562 30.722656 4.582031 30.371094 4.566406 30.007812 C 4.511719 27.296875 5.164062 25.832031 6.859375 23.75 C 10.457031 21.074219 14.648438 21.542969 18.933594 21.539062 Z M 18.933594 21.539062"
></path>
<path
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
d="M 24.773438 4.980469 C 26.601562 7.253906 27.25 8.6875 27.445312 11.609375 C 26.9375 14.550781 26.007812 16.015625 23.75 17.945312 C 21.28125 19.589844 18.722656 19.308594 15.832031 19 C 13.457031 17.875 12.148438 16.65625 11.082031 14.25 C 10.414062 11.46875 10.53125 9.515625 11.609375 6.859375 C 15.328125 2.574219 20.128906 1.125 24.773438 4.980469 Z M 15.570312 7.652344 C 14.449219 9.519531 14.359375 11.070312 14.777344 13.195312 C 15.480469 14.601562 15.480469 14.601562 16.890625 15.304688 C 19.011719 15.722656 20.5625 15.632812 22.429688 14.515625 C 23.550781 12.648438 23.640625 11.09375 23.222656 8.972656 C 22.519531 7.566406 22.519531 7.566406 21.109375 6.859375 C 18.988281 6.445312 17.4375 6.53125 15.570312 7.652344 Z M 15.570312 7.652344"
></path>
</g>
</svg>
</div>
</span>
<i></i>
</label>
کد CSS
.ds-label {
letter-spacing: 0.1em;
transition: 0.5s;
position: relative;
font-size: 17px;
background: #333;
border: none;
color: #fff;
display: block;
width: 250px;
padding: 5px 8px 5px 10px;
text-align: left;
transition: all 0.5s ease;
}
.ds-label:hover,
.ds-label:focus-within {
letter-spacing: 0.25em;
background: #ff1867;
color: #ff1867;
box-shadow: 0 0 45px #ff1867;
}
.ds-label::before {
content: "";
position: absolute;
inset: 2px;
background: #222222;
}
.ds-label span {
position: relative;
z-index: 1;
}
.ds-label i {
position: absolute;
inset: 0;
display: block;
}
.ds-label i::before {
content: "";
position: absolute;
border: 2px solid #ff1867;
width: 7px;
height: 4px;
top: -3.5px;
left: 80%;
background: #222222;
transform: translateX(-50%);
transition: 0.5s;
}
.ds-label:hover i::before {
width: 20px;
left: 20%;
}
.ds-label i::after {
content: "";
position: absolute;
border: 2px solid #ff1867;
width: 7px;
height: 4px;
bottom: -3.5px;
left: 20%;
background: #222222;
transform: translateX(-50%);
transition: 0.5s;
}
.ds-label:hover i::after {
width: 20px;
left: 80%;
}
.ds-input-icon {
position: absolute;
top: 50%;
left: 20px;
transform: translate(-50%, -50%);
background-color: transparent;
padding: 0.3em;
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
width: 38px;
height: 38px;
opacity: 0.5;
transition: all 0.5s ease;
}
.icon {
background-size: cover;
height: 100%;
}
.ds_textinput {
background-color: transparent;
border: none;
outline: none;
padding-left: 50px;
font-size: 16px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 50px;
margin-right: 0px;
padding-right: 10px;
width: calc(100% - 5%);
color: rgb(255, 255, 255);
pointer-events: auto;
}
.ds_textinput:focus ~ .ds-input-icon {
opacity: 1;
}
.ds_textinput:hover ~ .ds-input-icon {
opacity: 1;
}