Expanding Search

Round button that expands into a search field

How to use it

Paste the HTML where the forms & inputs should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="sbx-wrap"><input class="sbx-input" type="text" placeholder="Zoeken..."><button class="sbx-btn" aria-label="Zoeken"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fff" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></button></div>
</div>

/* Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sbx-wrap{display:flex;align-items:center;justify-content:flex-end;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;padding:5px;width:56px;transition:width .35s cubic-bezier(.4,0,.2,1);overflow:hidden;font-family:'Switzer',sans-serif}
.sbx-wrap.sbx-open{width:320px}
.sbx-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;color:#0a0a0a;padding:0 6px 0 14px;opacity:0;transition:opacity .25s}
.sbx-wrap.sbx-open .sbx-input{opacity:1}
.sbx-btn{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:#F5480F;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.sbx-btn:active{transform:scale(.92)}

// Expanding Search · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sbx-wrap')||root;var btn=root.querySelector('.sbx-btn'),inp=root.querySelector('.sbx-input');btn.addEventListener('click',function(){var open=root.classList.toggle('sbx-open');if(open)setTimeout(function(){inp.focus();},120);});inp.addEventListener('blur',function(){if(!inp.value)root.classList.remove('sbx-open');});
}
init(document.querySelector('.jouw-container'));

More forms & inputs

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →