mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<div class="input-form">
|
|
<input class="input" name="text" type="text" required="">
|
|
<label class="textUser">Click Here</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by guilhermeyohan - Tags: input */
|
|
.input-form {
|
|
position: relative;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.input {
|
|
border: solid 1.9px #9e9e9e;
|
|
border-radius: 1.3rem;
|
|
background: none;
|
|
padding: 1rem;
|
|
font-size: 1rem;
|
|
color: #000000;
|
|
transition: border 150ms cubic-bezier(0.4,0,0.2,1);
|
|
}
|
|
|
|
.textUser {
|
|
position: absolute;
|
|
left: 15px;
|
|
color: #666666;
|
|
pointer-events: none;
|
|
transform: translateY(1rem);
|
|
transition: 150ms cubic-bezier(0.4,0,0.2,1);
|
|
}
|
|
|
|
.input:focus, input:valid {
|
|
outline: none;
|
|
box-shadow: 1px 2px 5px rgba(133, 133, 133, 0.523);
|
|
background-image: linear-gradient(to top, rgba(182, 182, 182, 0.199), rgba(252, 252, 252, 0));
|
|
transition: background 4s ease-in-out;
|
|
}
|
|
|
|
.input:focus ~ label, input:valid ~ label {
|
|
transform: translateY(-95%) scale(0.9);
|
|
padding: 0 .2em;
|
|
color: #000000be;
|
|
left: 80px;
|
|
}
|
|
|
|
.input:hover {
|
|
border: solid 1.9px #000002;
|
|
transform: scale(1.03);
|
|
box-shadow: 1px 1px 5px rgba(133, 133, 133, 0.523);
|
|
transition: border-color 1s ease-in-out;
|
|
}
|
|
</style>
|