Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');

body {
  background-color: #ecf0f3;
}

.search-box {
  width: 100%;
  max-width: 350px;
  height: 60px;
  background-color: #ecf0f3;
  padding: 5px;
  box-shadow: 12px 12px 24px 0 rgba(209, 217, 230, 1), -12px -12px 24px 0 rgba(255, 255, 255, 1);
  border-radius: 100px;
  overflow: hidden;
  position: relative;

  input[type=text] {
    width: 100%;
    height: 50px;
    border-radius: 100px;
    border: none;
    background-color: #ecf0f3;
    transition: box-shadow 0.3s ease-in-out;
    font-size: 16px;
    color: #162B39;
    padding: 5px 60px 5px 24px;
    font-family: 'Fira Sans', sans-serif;
    
    &:focus {
      box-shadow: inset 6px 6px 10px 0 rgba(209, 217, 230, 1), inset -6px -6px 10px 0 rgba(255, 255, 255, 1);
      outline: none;
      transition: box-shadow 0.3s ease-in-out;
      
      + {
        .submit {
          svg {
            fill: #162B39;
          }
          
          &:hover {
            svg {
              fill: #627288;
            }
          }
        }
      }
    }
    
    &::-webkit-input-placeholder {
      color: #627288;
    }
    
    &::-moz-placeholder {
      color: #627288;
    }
    
    &:-ms-input-placeholder {
      color: #627288;
    }
    
    &:-moz-placeholder {
      color: #627288;
    }
  }

  .submit {
    position: absolute;
    right: 24px;
    top: 13px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    
    &:focus {
      outline: none;
      box-shadow: none;
    }
    
    &:hover {
      outline: none;
      box-shadow: none;
    }
    
    svg {
      fill: #9DACBB;
      width: 35px;
      transition: all .3s ease-in-out;
    }
  }
}