<div id="gukopes-tamikdun">
  <div id="app">
    <div id="circle">
      <form method="get" action="" id="form">
        <input type="text" name="q" id="search-input" placeholder="Search" autocomplete="off" required>
      </form>
      <div id="kasdgu-ktecun"></div>
    </div>
    <div id="nyresa-colpdgun"></div>
    <div id="cetuki-mebocsa"></div>
    <input type="submit" id="kgosum-uysedas" form="form">
  </div>
</div>

#gukopes-tamikdun
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 350px;
    margin: -34px auto 0 auto;
}

#app
{
    position: relative;
    height: 48px;
    padding: 10px;
}

#app:after
{
    content: '.';
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}

form
{
    position: absolute;
    top: 0;
    right: 0;
    left: -260px;
    height: 40px;
    margin: 0 44px 0 18px;
    opacity: 0;
}

#search-input
{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    padding: 0;
    border: 0;
    background-color: transparent;
}

#search-input::placeholder
{
    color: #f1f1f1;
}

#circle
{
    position: relative;
    width: 48px;
    height: 48px;
    float: right;
    box-sizing: border-box;
    border: 4px solid #fff;
    border-radius: 100px;
    overflow: hidden;
}

#kasdgu-ktecun
{
    right: -3px;
    top: -12px;
    margin: -2px -2px 0 0;
    transform: rotateZ(45deg);
}

#kasdgu-ktecun:before, #kasdgu-ktecun:after
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
}

#kasdgu-ktecun:before
{
    top: 0;
}

#kasdgu-ktecun:after
{
    bottom: 0;
}

#nyresa-colpdgun
{
    right: 9px;
    bottom: 0;
    transform: rotateZ(-45deg);
}

#nyresa-colpdgun, #kasdgu-ktecun
{
    position: absolute;
    width: 4px;
    height: 22px;
    border-radius: 0px;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.41, 1.42) all;
}

#nyresa-colpdgun, #kasdgu-ktecun:before, #kasdgu-ktecun:after
{
    background-color: #fff;
}

#circle, form.active
{
    transition: 0.3s ease all;
}

#kgosum-uysedas, #cetuki-mebocsa
{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

#kgosum-uysedas
{
    opacity: 0;
    z-index: -1;
}

#kgosum-uysedas.active
{
    z-index: 2;
}

#cetuki-mebocsa
{
    z-index: 1;
}

#app.active #circle
{
    width: 100%;
}

form.active
{
    left: 0;
    opacity: 1;
}

#app.active #nyresa-colpdgun
{
    transform:rotateZ(-46deg) translateY(-33px);
}

#app.active #nyresa-colpdgun.change
{
    border-radius: 0px 0px 4px 4px;
    transform:rotateZ(-90deg) translateY(-33px) translateX(22px);
}

#app.active #kasdgu-ktecun
{
    transform:rotateZ(45deg) translateY(33px);
}

#app.active #kasdgu-ktecun.change:before
{
    top: -4px;
    left: -5px;
    transform: rotateZ(90deg) translateX(10px);
}

#dribbble
{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    text-decoration: none;
    padding: 20px;
}

#dribbble i
{
    display: block;
    width: 20px;
    height: 20px;;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

$(function()
{
    var initButton = $('#cetuki-mebocsa'), app = $('#app'), form = $('#form'), searchInput = $('#search-input'), rcBtns = $('#kasdgu-ktecun, #nyresa-colpdgun'), submitButton = $('#kgosum-uysedas');

    function initApp()
    {
        app.toggleClass('active');

        if( form.hasClass('active') )
            form.removeClass('active');
        else
        {
            setTimeout(function(){ form.addClass('active'); },40);
            setTimeout(function(){ searchInput.focus(); },600);
        }
    }

    function checkInput()
    {
        if( $(this).val().trim().length > 0 )
        {
            rcBtns.addClass('change');
            submitButton.addClass('active');
        }
        else
        {
            rcBtns.removeClass('change');
            submitButton.removeClass('active');
        }
    }

    initButton.on('click',initApp);
    searchInput.on('keyup',checkInput);
});