<form class="inputbox">
  <input required="required"/>
  <button type="reset" class="del"></button>
</form>
@import url(https://fonts.googleapis.com/css?family=Montserrat:300);

body {
  background: #E0E4CC;
  color: #A9AB9E;
}

$size: 80px;
$width: 300px;
$stroke: 2px;
$speed: 0.4s;

.inputbox {
  height: $size;
  width: $width;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  
  input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
    padding: ($size - 16 - 1)/2 0;
    border: 0;
    background: none;
    width: $size;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    transition: width $speed ease-in-out, border-radius $speed ease-in-out, padding $speed/2;
    transition-delay: 0s, $speed, 0s;
    box-shadow: 0 0 0 $stroke currentColor;
    color: inherit;
    cursor: pointer;
    padding: ($size - 16 - 1)/2 0;
    padding-right: $size;
    font-weight: lighter;
    font-family: 'Montserrat';
   

    &:focus, &:valid {
      width: 100%;
      transition-delay: $speed, 0s, $speed;
      outline: 0;
      border-radius: 0;
      cursor: text;
      padding-left: ($size - 16 - 1)/2;
      

      
      +.del {
        pointer-events: all;
        left: calc(100% - #{$size/2});
        transition-delay: $speed;
        background:#69D2E7;
        width:60px;
        height:60px;
        color: #FFF;
        
       
        
        &:focus {
          box-shadow: 0 0 0 1px currentColor;
          height: $size/6*3;
          width: $size/6*3;
        }
      &:before {
          transform: translate(-50%,-50%) rotate(-45deg) scaleY(0.7);
          transition-delay: 0s;

        }
       &:after {
         transform: translate(-50%,-50%) rotate(45deg) scaleY(0.7);
          transition-delay: $speed/2;

        }
      }
    }
  }
  
  .del {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: $size+2;
    width: $size+1;
    padding: 0;
    background: none;
    border-radius: 100%;
    border: 0;
    pointer-events: none;
    transition: left $speed ease-in-out;
    transition-delay: 0s;
    color: inherit;
    cursor: pointer;

    
   
    &:focus {
      outline: none;
    }

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background:  currentColor;
      width: $stroke;
      height: $size/4*3;
      transform: translate($size/8*5 + 1,$size/8*5 + 1) translate(-50%,-50%) rotate(-45deg) scaleY(1);
      transition: transform $speed/2 ease-in-out;
      transition-delay: $speed*1.5;
  }
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background:  currentColor;
      width: $stroke;
      height: $size/4*3;
      transform: translate(-50%,-50%) rotate(45deg) scaleY(0);
      transition: transform $speed/2 ease-in-out;
      transition-delay: $speed;
    }
  }

}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.