.sample.thirteen input, .sample.fourteen input {
  background: none;
  border-color: #000;
  border-radius: 15px;
  border-width: 0 0 1px;
  transition: all .8s ease-in-out;
  width: 30px;
}
.sample.thirteen input:focus, .sample.fourteen input:focus {
  background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0) 65%, #ff69b4 140%);
  border-radius: 0 15px 15px 0;
  width: 250px;
}
.sample.thirteen input:focus ~ button.btn-search, .sample.fourteen input:focus ~ button.btn-search {
  background: hotpink;
  color: #fff;
  left: 222px;
  transform: rotate(720deg);
}
.sample.thirteen input:focus ~ button.btn-reset, .sample.fourteen input:focus ~ button.btn-reset {
  left: 256px;
  transform: rotate(360deg);
}
.sample.thirteen button, .sample.fourteen button {
  transition: all .8s ease-in-out;
}
.sample.thirteen button.btn-search, .sample.fourteen button.btn-search {
  background: #ccc;
  border: 1px solid #000;
  border-radius: 50%;
  height: 30px;
  left: 0;
  width: 30px;
}
.sample.thirteen button.btn-reset, .sample.fourteen button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 2px;
  line-height: 20px;
  padding: 0;
  top: 10px;
  width: 20px;
  z-index: -1;
}




/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}