galaxy/Inputs/SouravBandyopadhyay_modern-rabbit-52.html

68 lines
1.1 KiB
HTML

<div class="inp-border a1">
<input placeholder="Your Name" name="name1" type="text" class="input">
</div>
<style>
/* From Uiverse.io by SouravBandyopadhyay - Tags: input, light, transition */
.inp-border {
padding: 5px;
margin: 2em 1em;
border-radius: 50px;
max-width: 300px;
}
.input {
text-align: center;
padding: 15px;
outline: none;
border: double 0;
background: #252525;
border-radius: 50px;
position: relative;
box-sizing: border-box;
display: block;
width: 100%;
font-size: 1.5rem;
}
.a1 {
background: linear-gradient(
330.28deg,
#ff6e1d 100%,
#ff6e1d 100%,
#ff6e1d 100%
);
}
.a1 > input {
color: #caab98;
}
.a1 > input::placeholder {
color: #ff6e1d;
opacity: 0.6;
}
.inp-border:focus-within {
background: linear-gradient(
330.28deg,
#2cfff2 0%,
#1e78ff 30.73%,
#ff54a6 55.73%,
#ff6e1d 79.17%,
#ff3e3e 100%
);
}
.inp-border:hover {
background: linear-gradient(
330.28deg,
#2cfff2 0%,
#1e78ff 30.73%,
#ff54a6 55.73%,
#ff6e1d 79.17%,
#ff3e3e 100%
);
}
</style>