mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
62 lines
1.7 KiB
HTML
62 lines
1.7 KiB
HTML
<div class="input__container input__container--variant">
|
|
<div class="shadow__input shadow__input--variant"></div>
|
|
<input type="text" name="text" class="input__search input__search--variant" placeholder="Search...">
|
|
<button class="input__button__shadow input__button__shadow--variant">
|
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="1.5em" width="13em">
|
|
<path d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" fill-rule="evenodd" fill="#FFF"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Gautammsharma - Tags: clean, material design, minimalist, input, search, glow */
|
|
.input__container--variant {
|
|
background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
|
|
border-radius: 30px;
|
|
max-width: 13em;
|
|
padding: 1em 1em;
|
|
}
|
|
|
|
.shadow__input--variant {
|
|
filter: blur(25px);
|
|
border-radius: 30px;
|
|
background-color: #F3FFF9;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.input__button__shadow--variant {
|
|
border-radius: 15px;
|
|
background-color: #07372C;
|
|
padding: 10px;
|
|
border: none;
|
|
}
|
|
|
|
.input__button__shadow--variant:hover {
|
|
background-color: #3C6659;
|
|
}
|
|
|
|
.input__search--variant {
|
|
width: 13em;
|
|
align-items: center;
|
|
border-radius: 13em;
|
|
outline: none;
|
|
border: none;
|
|
padding: 0.8em;
|
|
font-size: 1.2em;
|
|
color: #002019;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.input__search--variant::placeholder {
|
|
color: #002019;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.input__container--variant {
|
|
background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
|
|
border-radius: 1.5em;
|
|
max-width: 14em;
|
|
padding: 1em;
|
|
box-shadow: 0em 1em 3em #beecdc64;
|
|
}
|
|
|
|
</style>
|